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

2022-02-18 21:04:44 阅读：153 来源： 互联网

标签：axios 封装请求 url token Vue data 2.6

一、为什么使用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>

标签：axios,封装,请求,url,token,Vue,data,2.6
来源： https://www.cnblogs.com/cc-font/p/15910828.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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