vue中axios的封装

安装

1  npm install axios; // 安装axios
2  npm install qs; // 安装第三方库

 

 

引入

在main.js中

1 import axios from 'axios';
2 import QS from 'qs'
3 
4 
5 Vue.prototype.axios = axios;
6 Vue.prototype.qs = QS;

 

一般会在项目的src目录中,新建一个 utils 文件夹,然后在里面新建一个 request.js 文件。用来封装我们的axios.

 1 import axios from 'axios';
 2 import qs from 'qs';// qs为第三方库 
 3 
 4 let request = axios.create({
 5     baseURL: "http://poetry.apiopen.top",
 6     timeout: 5000,
 7 })
 8 
 9 // 请求拦截器
10 request.interceptors.request.use(config => {
11     // 发送请求之前
12     if(config.method  === 'post'){
13         config.data = qs.stringify(config.data);
14     }
15     return config;
16 },
17     error => {
18         // 请求错误
19         return Promise.reject(error);
20     });
21 
22 // 响应拦截器
23 request.interceptors.response.use(response => {
24     // 响应数据
25     if(!response.data.success){
26         return Promise.resolve(response);
27     }
28     return response;
29 },
30     error => {
31         // 响应错误
32         return Promise.reject(error);
33     });
34 
35 export default request

在页面中引用

1 import request from "../utils/request";

 

上一篇:Python 将GET参数转为字典类型


下一篇:基本的axios用法