python封装api给vue_vue项目实战：api管理和封装

最新推荐文章于 2022-04-07 08:00:00 发布

最新推荐文章于 2022-04-07 08:00:00 发布 · 212 阅读

文章标签：

该博客详细介绍了在Vue项目中如何对axios进行二次封装，包括设置基础URL、超时时间、请求和响应拦截器的实现。还讨论了如何处理请求错误，并引入axios-retry库以自动重试请求。内容涵盖了配置axios实例、数据转换和错误处理等关键步骤。

/** @Description: api aixos的二次封装 request.js

* @Version: 2.0

* @Autor: lhl

* @Date: 2020-07-14 16:12:35

* @LastEditors: lhl

* @LastEditTime: 2020-08-20 17:08:27*/import Vue from'vue';

import axios from'axios';

import store from'../store/index'import qs from'qs'; //axios自带模块若报错找不到重新安装即可

//全局的 axios 默认值//axios.defaults.baseURL = 'https://api.example.com';//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//使用自定义配置新建一个 axios 实例

const instance =axios.create({

baseURL:'api', //process.env.BASE_API, // api的 base_url

timeout: 100000, //10s 请求超时时间

//headers: 'xx'

})//请求拦截器(全局)//Authorization-token: xxx-token

instance.interceptors.request.use(config =>{

console.log(config,'请求拦截器')

const token=store.state.user.token;//console.log(token,'token请求拦截器')

//const token = 'xxx-token';

token && (config.headers['Authorization-token'] =token);

config.withCredentials= true

if (config.headers['Content-Type'] === 'application/json') {

config.data=JSON.stringify(config.data)

}if (config.headers['Content-Type'] === 'multipart/form-data') {returnconfig

}if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {if (typeof (config.data) !== 'string') {

config.data=qs.stringify(config.data)

}

}returnconfig

}, error=>{returnPromise.reject(error)

})//响应拦截器(全局)

instance.interceptors.response.use(response =>{

console.log(response,'响应拦截器')//把axios的data层去掉原本(res.data.xx) 直接使用数据就可以res.xx即可

returnresponse.data

}, error=>{returnPromise.reject(error)

})

exportdefaultinstance//使用axios在调用后台接口超时或是报某个特性的错误码时，需要重新发送请求。此时用到一个第三方的库：axios-retry解决了这个问题

//npm install axios-retry

//import axiosRetry from 'axios-retry';

////配置axios//axiosRetry(axios, {//retries: 3, //设置自动发送请求次数//retryCondition: (error)=>{////true为打开自动发送请求，false为关闭自动发送请求////这里的意思是当请求方式为get时打开自动发送请求功能//return (error.config.method === 'get');//}//});