在请求中有时需要更改请求的头部,或增加token,需要封装Axios,新建api.js放在utils文件夹
因为后端只允许两种方式访问,get,post,所以封装api.get()和api.post()
分别是:
//get请求
api.get=async (url,params,)=>{
return await apiAxios('GET',url,params)
}
//post请求
api.post=async (url,params,)=>{
return await apiAxios('POST',url,params)
}
const baseUrl = 'http://localhost:3000/'
const apiAxios = async (method,url,params)=>{
? ? ? ? ? ? let headers={fapp:'book','Content-Type':'application/json'}
? ? ? ? ? ? if(sessionStorage.getItem('token')){
? ? ? ? ? ? header.token = sessionStorage.getItem('token')
}
? ? ? ? return await new Promise((resolve)=>{
? ? ? ? axios({
? ? ? ? ? ? headers:headers,
????????????method:mothod,
? ? ? ? ? ? url:baseUrl+url,
? ? ? ? ? ? //数据内容
? ? ? ? ? ? data:
? ? ? ? ? ? ? ? ? ? method ==='POST'?params:null,
? ? ? ? ? ? ? params:
? ? ? ? ? ? ? ? ? ? method==='GET'?params:null
}).then(res=>{
? ? ? ? resolve(res.data)
}).catch(e=>{
? ? console.log(e)
})? ??
})
}
之后再挂在Vue的原型链上,Vue.prototype.$api=api
可能出现跨域问题:一般三种解决方法
1.设计反向代理
2.使用jsonp,允许用户传递一个callbac参数给服务器端;
3.在服务器端设置res的头部信息,允许所有请求或部分指定来源的请求.
本项目采用第三种