安装axios
npm install axios; // 安装axios复制代码
封装axios
在src文件夹中创建api文件夹，再在api文件夹中创建axios.js文件
api.jpg
在axios.js文件中封装
import axios from 'axios'
import qs from 'qs'
// 超时时间
axios.defaults.timeout = 30000000
axios.defaults.baseURL = ROOT_URL
axios.interceptors.request.use(
config => {
config.method === 'post' ?
(config.data = qs.stringify({
...config.data
})) :
(config.params = {
...config.params
})
config.headers['Content-Type'] =
'application/x-www-form-urlencoded' //'application/json;charset=utf-8';////；
return config
},
error => {
return Promise.reject(error)
}
)
//ajax返回请求拦截 拦截
axios.interceptors.response.use(
data => {
// ajax 返回状态
const res = data.data
// 状态不为200的时候
if (!res.features && res.code !== 200&& res.code !== 0&& res.code !== 1 ) {
Message({
message: res.message,
type: 'error'
})
return Promise.reject(res);
} else {
if (data.status) {
return res
} else {
if (!res.data) return 'null'
return res.data
}
}
},
error => {
const errMsg = error.toString()
const code = errMsg.substr(errMsg.indexOf('code') + 5)
if (parseInt(code) === 401) {
}
return Promise.reject(error)
}
)
在static文件夹创建common文件夹
在common文件夹下创建urlConfig.js文件来输入项目的服务后台接口的地址
// 项目的服务后台接口的地址
const ROOT_URL = 'http://10.16.30.31:9709/'
在api文件夹下创建urlCol.js文件
在urlCol.js文件下写后台接口集合
let rootUrl = ROOT_URL
const urlCol = {
apiCol: rootUrl + '/url', // 接口地址
}
在api文件夹下创建apiCol.js文件
在apiCol.js文件下输入请求方式
import request from './axios'
// 引入后台接口集合
import urlCol from './urlCol'
export function apiCol(query) {
return request({
url: urlCol.apiCol,
method: 'get',
params: query
})
}
在组件中引入就可以使用
import {
apiCol
} from "@/api/apiCol";
getApiCol() {
apiCol({
id: this.id,
keyword: this.keyword
}).then((res) => {
if(res.code == 200){
...
}else {
this.$message({
message: res.message,
type: 'warning'
})
}
})
}
最后在index.html里面引入urlConfig.js文件
<script src="/static/common/urlConfig.js"></script>
第一次编写文档，若有不对的地方还请指出，多多赐教
