創(chuàng)建api文件夾间狂，文件夾下創(chuàng)建 api.js 和 http.js
安裝axios和qs
npm install axios --save
npm i qs
在main.js 頭部引入
import api from './api/api'
Vue.prototype.$api = api;
//http.js
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊澳腹，用來序列化post類型的數(shù)據(jù)，后面會(huì)提到
axios.defaults.withCredentials = true; //發(fā)送cookie
if (process.env.NODE_ENV == 'development') {
// if (window.location.origin == 'http://z.tech-chance.com') {
// axios.defaults.baseURL = 'http://xbh.tech-chance.com';
// }
// if (window.location.origin == 'http://n.tech-chance.com') {
// axios.defaults.baseURL = 'http://n.tech-chance.com'
// }
// axios.defaults.baseURL = 'http://n.xyplove.com';
axios.defaults.baseURL = 'http://n.75521.com'
// axios.defaults.baseURL = 'http://lsh.75521.com'
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = window.location.origin
}
// axios.defaults.baseURL = 'http://192.168.100.73'
// axios.defaults.baseURL = 'http://n.tech-chance.com'
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //post請(qǐng)求頭的設(shè)置
// 響應(yīng)攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態(tài)碼為200，說明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù)
// 否則的話拋出錯(cuò)誤
// let token = window.localStorage.getItem("accessToken")
// if (token) {
// response.headers.accessToken = token; //將token放到請(qǐng)求頭發(fā)送給服務(wù)器
// return response;
// //這里經(jīng)常搭配token使用选调，將token值配置到tokenkey中，將tokenkey放在請(qǐng)求頭中
// // config.headers['accessToken'] = Token;
// }else{
// console.log(response)
// response.config.headers.accessToken = 123;
// }
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服務(wù)器狀態(tài)碼不是2開頭的的情況
// 這里可以跟你們的后臺(tái)開發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼
// 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作灵份，例如登錄過期提示学歧，錯(cuò)誤提示等等
// 下面列舉幾個(gè)常見的操作，其他需求可自行擴(kuò)展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登錄
// 未登錄則跳轉(zhuǎn)登錄頁(yè)面各吨，并攜帶當(dāng)前頁(yè)面的路徑
// 在登錄成功后返回當(dāng)前頁(yè)面枝笨，這一步需要在登錄頁(yè)操作。
case 4300:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過期
// 登錄過期對(duì)用戶進(jìn)行提示
// 清除本地token和清空vuex中token對(duì)象
// 跳轉(zhuǎn)登錄頁(yè)面
case 403:
// Toast({
// message: '登錄過期揭蜒，請(qǐng)重新登錄',
// duration: 1000,
// forbidClick: true
// });
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳轉(zhuǎn)登錄頁(yè)面横浑，并將要瀏覽的頁(yè)面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁(yè)面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404請(qǐng)求不存在
case 404:
Toast({
message: '網(wǎng)絡(luò)請(qǐng)求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他錯(cuò)誤屉更，直接拋出錯(cuò)誤提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
)
/**
* get方法徙融，對(duì)應(yīng)get請(qǐng)求
* @param {String} url [請(qǐng)求的url地址]
* @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
/**
* post方法，對(duì)應(yīng)post請(qǐng)求
* @param {String} url [請(qǐng)求的url地址]
* @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
* @param {Object} head_conf [修改請(qǐng)求頭]
*/
export function post(url, params, head_conf) {
return new Promise((resolve, reject) => {
if (head_conf != undefined) { //文件上傳獲取url
console.log("上傳文件")
axios.post(url, params, head_conf)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
} else {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
}
});
}
//api.js
import {
get,
post
} from './http';
export default {
getChargeProduct(data) { //獲取充值商品
return post('url', data)
},
getUserInfo(data) { //通過手機(jī)號(hào)登錄
return post('url', data)
},
}
