一、安装axios、qs。
npm i axios --save-dev
npm i qs --save-dev
二、配置axios
在src下新建config文件夹。并新建js文件。
MT.js
// 引入axios、qs
const axios = require('axios')
const qs = require('qs')
// 异步请求设置,允许跨域
axios.defaults.withCredentials = true
// 配置默认的host(如果有其他地方需要用到host,可以新建一个js文件直接 export { baseUrl })
let baseUrl = 'https://www.baidu.com'
const service = axios.create({})
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
Promise.reject(error)
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
});
// 配置接口请求方式
export const LYD = {
POST(url, params, type) {
if (type === 'json') {
return service.post(baseUrl + url, params)
} else {
return service.post(baseUrl + url, qs.stringify(params), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
}
})
}
},
GET(url, params) {
if (params) {
return service.get(baseUrl + url + '/?' + qs.stringify(params), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
} else {
return service.get(baseUrl + url + '/', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
}
}
}
配置完成后,在src下新建service文件夹,新建index.js文件
import { LYD } from '../config/LYD'
// 调用接口---例如:
export const jiekou1 = params => LYD.POST("/def/post/jiekou1", params)
export const jiekou2 = params => LYD.GET("/def/get/jiekou2", params)
接下来就是如何使用了。
在页面引入需要用到的接口方法名。例如上面是jiekou1 、jiekou2
import { jiekou1, jiekou2 } from '@/service'
// 在mounted里直接调用
mounted () {
// 调用接口
jiekou1({
id: 1
}).then(res => {
console.log(res)
})
jiekou2 ({
type: 1
}).then(res => {
console.log(res)
})
}
这样一个接口的基本配置就完成了。demo地址:https://github.com/leiyunduo/Vue-Element-UI
网友评论