基于Vue脚手架2.6的框架项目开发使用axios请求接口使用

本文主要是介绍基于Vue脚手架2.6的框架项目开发使用axios请求接口使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、为什么使用axios？(响应拦截，请求，异步封装配置)

它是基于xhr的请求封装的引进优化的一个请求库，

这个库是使用Promise实现的一个XHR封装、它可以实现请求和响应拦截，同时可以实现通用的配置（封装axios请求）

//在apis文件夹写建立封装的Ajax文件
//引入axios
import axios from 'axios'

//可以实现把固定的参数进行一个封装，然后再实现请求拦截
//created方法接收一个请求配置对象，返回一个实例
const Axios =axios.create({
   timeout:5000,
   baseURL:'/apis',
})

//可以使用实例的拦截属性来进行请求拦截 -- 发起请求之前，请求响应之后
//请求之前做一个拦截
//函数会把请求参数全部传参进来，我们可以对这个参数做处理
//请求前的拦截，需要返回数据，才会继续发出请求
Axios.inteceptors.request.use(function(config){
  console.log(config)
//如果token不存在则直接抛出一个错误，然后结束请求，不然发不出请求
//模拟有token数据
 let token='aaaa'
 let otherPath =['/user/app/code','/user/app/login']
//如果请求地址包含在排除地址中，那么这个请求就不要拦截
if(otherPath.includes(config.url)){
  return config
}else{
  //如果需要拦截，则需要对token进行校验
//不存在，直接返回一个错误信息
 if(!token){
  return Promise.reject({code:400,message:'当前用户没有登录，所以不能发出异步请求'})
}else{
  //可以对config数据进行加工，添加上token数据
  config.headers.token=token
  //直接发出请求
  return config
}
}
})
//响应之后 -- 需要使用use方法来注册一个钩子函数，用于axios在完成请求之后来执行业务处理方法
//use 需要传递一个函数，这通用业务的一个拦截处理
个函数要求返回一个Promise或则是一个对象(Promise | any)
//函数会有一个响应对象形参，然后可以通过对形参的data对象处理，实现一个拦截处理
Axios.interceptors.response.use(function(response){
  //判断后端返回的状态码是否是403，如果是403，直接抛出一个异常，中断请求，然后提示用户token失效，需要重新登录
if(response.data.code === 403){
  //throw new TypeError('用户的token错误或已失效，需要用户重新登录获取新的token')

}else{
  //正常的业务直接返回对象
  return response
}
})

//封装一个ajax请求方法
function ajaxFunc(req){
 //如果url地址没有传递，直接报错 --JS是主线程运行应用，所以可以使用异常抛出中断当前的现程
if(!req.url){
   throw new SyntaxError('请求的url参数是必传的')
}
 return new Promise(resolve=>{
    //把动态数据url,method,params,data抽取出来
   //应该用封装后的一个请求实例对象
  //axios.request({
    //设置请求地址
     url:req.url,
    method:req.method || 'GET',
   //params参数配置 -- 它的参数会自动拼接到url地址上
   params:req.params || {},
   //data参数 -- 不能在get请求中使用，它是请求体参数
   data:req.data ||｛｝
// }).then(data=>{
//请求返回的是一个response对象，希望得到数据
   //console.log(data.data)
 
}).then(({data})=>{
  //可以对response对象进行结构取值
  //返回数据
  resolve(data)
}).catch(e=>{
  console.log('-----请求失败')
 resolve(e)
})
})
}
export defalut ajaxFunc

封装一个公共axios请求，是为方便其他的接口来请求调用

//对所有的登录接口进行封装，只接收参数，然后返回请求结果，所有的接口都应该单独导出

//引入封装后的axios请求方法
import Ajax from './Ajax'

//单独导出一个获取验证码的接口
export function getVdtCodeApi(phone){
  //需要返回一个Promise回去
  return Ajax({
  url:'/user/app/code',
  //params接收的是一个对象
  //params:{phone:phone}
   params:{phone}
})
}
//如何使用一个动态接口：/user/:id 文档形式，/user/{id} swagger形式
//在使用的时候，需要把:id或则是{id} 替换为需要传递的参数值
export function getUserInfoApi(id){
  return Ajax({
   //url:'/user/'+id
  url:`/user/{$id}`
})
}

在组件页面调用接口数据：（首先在js里引入然后在methods里使用async/awiat同步操作进行数据获取）

<script>
  import {getUserInfoApi,getVdtCodeApi} from '../../apis/loginApi'
  export defalut{
   data(){
    return{
   value:''
}
   }
methods:{
    //获取验证码请求接口的方法
 async getVdtCode(){
  let result = awiat getVdtCodeApi('18982739')
  console.log(result)
}
}
}

</script>

这篇关于基于Vue脚手架2.6的框架项目开发使用axios请求接口使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！