axios配合vue的使用，以及各种方法请求的封装

第一步

建立request.js文件,引入Vue,引入axios（确保已经在环境中安装过axios）

import Vue from 'vue';
import axios from 'axios'

第二步

设置配置环境，设置请求超时时间

//可以根据yarn run 不同的环境去执行正式/测试的接口链接
axios.defaults.baseURL=process.env.VUE_APP_BASE_URL;
//超过相应的请求时间，请求将不再生效
axios.defaults.timeout=10000;

第三步

3.1——将表单数据转换成对象：

@param data
@return {FormData}
作用：
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件

const data2fromData = (data) => {
  if (!data) return data;
  const formData = new FormData();
  Object.keys(data)
    .filter(key => data[key])
    .forEach(key => formData.set(key, data[key]));
  return formData;
};

3.2——封装请求

GET请求：通常用于请求数据进行回显
	const get = async (url,params)=>axios.get(url,{params});

图片上传的get请求：
	const getPic = async (url, params = {}) => axios.get(url, {params});

POST请求：通常用于表单提交
	const post = async (url,data)=>axios.post(url,data2fromData(data));
带有content-type的POST请求：
	const post1=async (url,data)=>axios.post(url,data,{
		headers:{
			'Content-Type':'application/json;charset=UTF-8'
		}
	})

PUT请求：与POST类似，不同之处在与幂等性请求要用put
	const put = async (url,data)=>axios.put(url,data2fromData(data));

DELETE请求：配合数据库进行相应的删除操作
	const delete = async (url,data)=>axios.delete(url,data2fromData(data));

PATCH请求：通常用于改变当前上下架/是否热门状态，更新某一个或某一范围的状态
	const patch = async (url,data)=>axios.patch(url,data2fromData(data));

除了可以封装请求方法外，也可以在此进行请求拦截和响应拦截
请求拦截：
axios.interceptors.request.use(async (request) => {
  if (store.state.header.headers) {
    request.headers[OPENID] = store.state.header.headers;
  }
  return request;
}, null);
响应错误拦截：
	axios.interceptors.response.use(
		async response=>response.data,
		error=>{
			const msg=error.response&&(error.response.data||error.response.statusText);
			Vue.prototype.$message.error(msg||error.message);
			//若登录失败
			if(error.response&&error.response.status===401){
				router.push("/login");
			}
			throw error;
		}
	)

第四步

绑定Vue原型链上，使用时可以直接使用简称
Vue.prototype.$post=post;    //使用时使用this.$post
Vue.prototype.$get=get;
Vue.prototype.$put=put;
Vue.prototype.$delete=delete;
Vue.prototype.$patch=patch;

第五步

在main.js文件中引入/调用这个request.js文件，令其中的语法生效

Every road forward , you are not alone in the fight!
每一条前进的路上，你都不是一个人在战斗。