封裝過程中遇到的問題簡單記錄下：1、post請求參數拼接到請求鏈接后面，檢查了一下發現post請求到參數有問題修改如下
新建server.js文件
import axios from "axios"
import { Toast } from 'vant'
import qs from 'qs'
let serve = axios.create({
timeout: 10000,
// baseUrl: process.env.API,
})
serve.interceptors.request.use((config)=>{
console.log('config',config)
config.data = JSON.stringify(config.data); //數據轉化,也可以使用qs轉換
config.headers = {
'Content-Type':'application/json' //配置請求頭
}
// let token = ''
// if(token) {
// config.headers.token = token
// }
//config.data = qs.stringify(config.data)
return config
},err=>{
console.log('err',err)
// return Promise.reject(err)
})
serve.interceptors.response.use((response)=>{
let code = response.data.code
if(response.status==200) {
return response
}else {
Toast(response.data.message)
}
},err=>{
if(err && err.response) {
let res = err.response.status
switch(res) {
case 400:
err.message = '錯誤請求';
break;
case 401:
err.message = '未授權，請重新登錄';
break;
case 403:
err.message = '拒絕訪問';
break;
case 404:
err.message = '請求資源不存在';
break;
case 405:
err.message = '請求路徑出錯';
break;
case 500:
err.message = '服務端出錯';
break;
case 502:
err.message = '網絡出錯';
break;
case 503:
err.message = '服務不可用';
break;
case 504:
err.message = '網絡超時';
break;
}
}else {
err.message = '連接服務器失敗'
}
Toast(err.message)
return Promise.reject(err.response)
})
export default serve
httpRequest.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import serve from './serve.js'
const httpRequest = {
get(url,params) {
const config = {
method: 'get',
url:url
}
if(params) {
config.params = params
}
return serve(config)
},
post(url,params) {
const config = {
method: 'post',
url:url
}
if(params) {
config.data = params
}
return serve(config)
},
put(url,params) {
const config = {
method: 'put',
url:url
}
if(params) {
config.params = params
}
return serve(config)
}
}
export default httpRequest
