1、 開篇
在前後端分離的過程中最常見的網絡請問問題之一是:前端的cookie如何保存至瀏覽器且下次請求附帶上,還有cookie跨域等。
本文用axios做網絡請求解決這些問題。
2、 axios安裝
npm install axios - - save
3、 初始化&配置參數(重點是配置文件內容)
新建networking.js
import axios from 'axios'
import qs from 'qs'
import {APIV1} from './config'
axios.defaults.withCredentials = true;
axios.interceptors.request.use(config => {
// loading
return config
}, error => {
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
return response
}, error => {
return Promise.resolve(error.response)
})
function checkStatus(response) {
// loading
// 如果http狀態碼正常,則直接返回數據
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
return response
// 如果不需要除了data之外的數據,可以直接 return response.data
}
// 異常狀態下,把錯誤信息返回去
return {
status: -404,
msg: '網絡異常'
}
}
function checkCode(res) {
// 如果code異常(這裏已經包括網絡錯誤,服務器錯誤,後端拋出的錯誤),可以彈出一個錯誤提示,告訴用戶
if (res.status === -404) {
alert(res.msg)
}
// if (res.data && (!res.data.success)) {
// alert(res.data.error_msg)
// }
return res
}
module.exports = {
post(url, data) {
return axios({
method: 'post',
baseURL: APIV1,
url,
data: qs.stringify(data),
timeout: 30000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then(
(response) => {
return checkStatus(response)
}
).then(
(res) => {
return checkCode(res)
}
)
},
get(url, params) {
return axios({
method: 'get',
baseURL: APIV1,
url,
params, // get 請求時帶的參數
timeout: 30000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(
(response) => {
return checkStatus(response)
}
).then(
(res) => {
return checkCode(res)
}
)
}
}
4、使用axios做網絡請求
導包:
import {post, get} from ‘./networking’
使用:
post(url, parameter)
.then((response) => {
return Promise.resolve({
success: true,
...response.data,
})
})
.catch((error) => {
const {response} = error
let msg = error.msg || 'Network Error'
return Promise.reject({success: false, message: msg})
})
5、使用效果
調用“登錄”完成後返回的Header:
登錄完成後調用“獲取用戶信息”完成後返回的Header:
結論:上面2圖的SESSIONID一致請求到後臺的時候就能保證是同一個用戶在做操作了,使用了axios做網絡請求還有很多api可以供使用,在這裏axios解決了跨域cookie的問題。