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

为什么要封装axios?

在项目的开发中有三个阶段

1. 开发环境(dev.abc.com)
2. 测试环境(text.abc.com)
3. 生产环境(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);
});