axios模块封装
- 创建一个
network
文件夹- 创建一个
request.js
文件 - 创建一个
main.js
文件
- 创建一个
request.js
import axios from ‘axios‘
export function request(config) {
//1.创建axios的实例
const instance = axios.create({
timeout: 5000//超时设置
})
//2.axios拦截器
//2.1请求拦截的作用
axios.interceptors.request.use(config => {
console.log(config)
//1.比如说config中的一些信息不符合服务器的要求
//2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
//3.某些网络请求(比如登陆(token)),必须携带一些特殊的信息
return config
}, err => {
console.log(err)
})
//2.2 响应拦截的作用
axios.interceptors.response.use(res => {
console.log(res)
}, err => {
console.log(err)
})
//3.发送真正的网络请求
return instance(config)
}
main.js
import {request} from ‘./request‘
export function 函数名(){
return request({
url: ‘请求地址‘
})
}
使用
函数名()
.then(res => {
console.log(res)
})
.catch(
);
常见的配置选项
-
请求地址
url: ‘/user‘
-
请求类型,默认get
methods: ‘get‘
-
请求根路径
baseURL: ‘http://www.aaa.com/api‘
-
请求前的数据处理
transformRequest: [function(data) {}]
-
自定义的请求头
headers: {‘x-Requested-With‘: ‘XMLHttpRequest‘}
-
URL查询对象(get请求)
params: {name: lazy}
-
查询对象序列化函数
paramsSerializer: function(params){}
-
request body(post请求)
data: {name: lazy}
-
超时设置(s)
timeout: 1000
-
跨域是否带Token
withCredentials: false
-
自定义请求处理
adapter: function(resolve, reject, config){}
-
身份验证信息
auth: {uname: ‘‘, pwd: ‘12‘}
-
响应的数据格式
responseType: ‘json‘