为什么要封装axios请求方法，以及如何封装

为什么要封装axios?

开发环境(dev.abc.com)
测试环境(text.abc.com)
生产环境(abc.com)

如何封装axios请求

1.首先先创建一个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);
});

转载于 axios