axios请求的封装

/* axios的请求封装 */

        //axios的原生写法get,post请求

        //第一个参数为请求地址，第二个参数为请求的参数,params是将参数拼接在url的后面

  axios.get(url, {
            params: {
                id: 1
            }
        }),

 

 //第一个参数为请求地址，第二个参数为请求的参数，第三个为配置项，可传可不传

  axios.post(url, {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }, {}).then(res => {

            }).catch(error => {
                console.log(error);
            })

  封装axios请求的好处：

            1。 因为我们开发项目的环境分为三种环境，分别是：开发环境，测试环境，生产环境，每个环境对应的请求 路径的域名不一样，我们传入的url = 域名（https://baudu.com）+ 路（/api.sv/jdmsding/num）, 如果不封装的话，到时候切换环境时，需要找到文件修改各个url，非常麻烦，所以封装可以解决

            2.  封装的话，可以对数据进行请求的拦截，比如我们每次请求时，需要一个token值，那么我们只需要在请求拦截里给他加上token即可，响应拦截，可以根据返回的状态值做出响应的判断        

 　　　　//引入axios
        import axios form 'axios';

        //创建实例的作用是，可以让将baseUrl拼接在url的前面，给axios设置默认值
        const instance = axios.create({
            balseUrl: "https://baudu.com/api.sv",
            timeout: 5000
        })
        //添加请求拦截---每次发送请求，都会经过请求拦截
        instance.interceptors.request.use(function (config) {
            //比如，添加了一个请求头
            config.headers.token = "12356"
            return config
        }, function (error) {
            return Promise.reject(error)
        });
        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 对响应数据做点什么，比如
            if(response.code == 404){
                //做些什么
            }
            return response;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
        export function get(url, params) {
            return instance.get({
                url: url,
                params: params
            })
        }
        export function post(url, params) {
            return instance.post({
                url: url,
                data: params
            })
        }

使用的封装的时候直接 在需要请求的地方引入

        import {get,post} from './request';

然后直接使用

        get(url,params).then(res=>{

        }).catch(error=>{})