关于Axios的使用

一直以来对axios都是半懵逼的状态，今天来整理下其常用用法

1. 执行 GET ，POST请求

GET:
axios.get('/user?ID=12345')
	.then(res => {
		console.log(res)
	})
	.catch(err => {
		console.log(err)
	})

传参通过params
axios.get("/user",{
	params: {
		ID:12345
	}
})
一般来说可以把参数利用模板字符串把参数直接写到后面
axios.get(`/user?ID=${number}`)


POST:
axios.post("/user?ID=12345")

POST传参方式和get是有点不一样的
axios.post("/user",{
	ID: 12345
})

post请求不用加上params就可直接传递参数

2. 这是其中的一种写法，算是不常用的写法，一般我们可以直接传入一大堆配置

axios.create({
	url: '/user?ID=12345',
	baseURL:"https://192.168.32/",//公共url，到时候会自动拼接到url的后面
	method: 'get',//默认是get请求
	timeout: 9000,//如果在限制时间里没有拿到数据，则会抛出错误
	headers: {
    	'Content-Type': 'application/json;charset=UTF-8'//决定浏览器将以什么形式、什么编码读取这个文件。application/json:表示要的数据格式为JSON数据格式
  	}
})

3. axios还可以配置各个axios实例的默认公共配置，例如：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

4. Axios.all属性

其实axios是通过Promise封装ajax，本质上是一个Promise对象，所以可以使用then方法来获取到请求过来的数据。而万一有种需求，需要我们处理并发的两个请求，仅当我们知道两个接口都请求成功之后才处理接下来的事情该如何解决?

此时axios给予了我们一个方法.all()用来专门处理多个请求成功之后的情况

举例：

method: {
	function req1(){
		return axios({
			url: "req1/req",
			method: "get"
		})
	},
	function req2(){
		return axios({
			url: "req2/req",
			method: "post"
		})
	}
}

mouted: {
	getAllData(){
		const me = this;因为后续用到了all方法是一个函数，后面使用this会导致指向出现问题。以后遇到函数里面，嵌套函数的使用都要利用临时指针来针对这种场景
		this.axios.all([req1,req2])
			.then((res1,res2) => {//注意all里面谁写在前头谁获得的值就是res1，以此类推			
			console.log('res1的值为....'res1,'res2的值为.....' res2)
			})
	}
}

这样就相当于实现了并发的需求

需要注意的是：all方法属于静态方法而非实例方法

既是并非成员方法，静态方法在类实例化前就可以使用，而类中的非静态变量必须在实例化之后才能分配内存；

Axios拦截器的配置使用

拦截器这个一直是我之前没搞懂比较迷糊的地方，其实是非常简单的

1. 请求拦截器 interceptors

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

• 这个拦截器会在你发送请求之前运行
  我的这个请求拦截器的功能是为我每一次请求去判断是否有token，如果token存在则在请求头加上这个token。后台会判断我这个token是否过期。

// http request 拦截器
instance.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.authorization = token  //请求头加上token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

• 或者是处理我们优化用户体验。 比如也就是在请求数据过来前的转圈圈特效

// 添加请求拦截器
Service.interceptors.request.use(config => {//Service是axios的一个实例
  loadingInstance = Loading.service({
    lock: true,
    text: "拼命加载中",
    spinner: "el-icon-loading"
  })
  return config//无论有没有更改这个config最后都要return出去
})

2. 响应拦截器

• 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页等。

// response interceptor
service.interceptors.response.use(
    response => {
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。
                case 401:
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;

                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面
                case 403:
                      Message({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;

                // 404请求不存在
                case 404:
                    Message({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    Message({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
});

• 或者是此时请求成功了，我们应该结束loding的动画

// 添加响应拦截器
Service.interceptors.response.use(response => {
  loadingInstance.close()
  // console.log(response)
  return response.data
}, error => {
  console.log('TCL: error', error)
  const msg = error.Message !== undefined ? error.Message : ''
  Message({
    message: '网络错误' + msg,
    type: 'error',
    duration: 3 * 1000
  })
  loadingInstance.close()
  return Promise.reject(error)
})