为什么要封装axios?
在项目的开发中有三个阶段
- 开发环境(dev.abc.com)
- 测试环境(text.abc.com)
- 生产环境(abc.com)
访问接口数据时，例如：商品接口会是【域名】/api/v1/products
当环境不同时，直接修改域名就可。这就是封装请求的原因。
axios基础get请求，post请求
老生常谈，get请求发送数据返回，post可以携带数据发送处理请求(一般用于提交表单或者上传数据)，token
//axios.get 发起get请求
//参数一表示请求地址
//参数二表示配置信息
//params 表示传递到服务器端的数据，已url参数的形式拼接在请求地址后面
//{page:1,per:3}
// 比如:http://jsonplaceholder.typicode.com/
//最终生成：http://jsonplaceholder.typicode.com/?page=1&per=3
// 其中?表示可选参数
//headers 表示请求头
getHandle(){
axios.get('http://jsonplaceholder.typicode.com/',{
params:{
//注意，params和headers是固定字符
page:3,
per:2
},
headers:{
}
})
.then(res=>console.log(res))
},
postHandle(){
//post请求传递三个参数
//请求地址
//请求数据，请求配置，
//axios默认发送的数据是json格式的
//配置信息
//headers
//content-type:'application/json' 默认
axios.post('http://open.qunar.com/',{
userName:'xiaoming',
password:'112132'
},{
})
.then(res => console.log(res))
.catch(err=>console.log(err))
},
如何封装axios请求
首先先创建一个request.js文件
import axiox from 'axios'
const instance =axiox.create({
baseURL:'http://jsonplaceholder.typicode.com/',//baseURL会在发送请求的时候拼接在url参数的前面
timeout:5000
})
//请求拦截
//所有的网络请求都会先走这个方法
// 添加请求拦截器,所有的网络请求都会先走这个方法，我们可以在它里面为请求添加一些自定义的内容
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('全局请求拦截')
console.log(config)
console.groupEnd()
config.headers.token='12343'
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
//此处可以根据服务器的返回状态码做响应的处理
//404 404 500
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('全局响应拦截')
console.log(response)
console.groupEnd()
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export function get(url,params) {
return instance.get(url,{
params
})
}
export function post(url,data) {
return instance.post(url,data)
}
export function del(url) {
return instance.delete(url)
}
export function put(url,data) {
return instance.put(url,data)
}
是不是很长，有点懵，没事，咱们挨个解释，
首先，是简单的get请求封装
const instance =axiox.create({
baseURL:'http://jsonplaceholder.typicode.com/',//baseURL会在发送请求的时候拼接在url参数的前面
timeout:5000
})
export function get(url,params) {
return instance.get(url,{
params
})
}
这里的baseURL会在调用封装好的get方时，自动拼接地址
import {
get} from '../utils/request'//导入封装的request文件
getByMineHandle(){
//调用get方法
get('/api/v1/products',{
})
.then(res=>{
console.log('成功',res)
})
.catch(err=>{
console.log('错误',err)
})
}
全局请求拦截，会在所有的请求发送时，先拦截添加自定义的数据，
这里添加了一个自定义的token值
（token相当于客户端的身份证）
//请求拦截
//所有的网络请求都会先走这个方法
// 添加请求拦截器,所有的网络请求都会先走这个方法，我们可以在它里面为请求添加一些自定义的内容
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('全局请求拦截')
console.log(config)
console.groupEnd()
config.headers.token='12343'
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
全局响应拦截，会在得到响应时触发对相应的数据操作，可以根据服务器的返回状态码做响应的处理(404,401,403…)
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('全局响应拦截')
console.log(response)
console.groupEnd()
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});