1.src目录下,新建文件夹utils,在utils内新建request.js
import axios from 'axios' //安装axios并引入
const autograph = function auths (url, query) {
var headers = {
'Content-Type': 'application/json;charset=UTF-8'
}
return { query, headers }
}
// 创建axios实例
const service = axios.create({
//请求的地址,也可根据代码配置获取,具体网上查找开发环境的地址
baseURL:'https://elm.cangdu.org/v1',
//延迟
timeout: 15000
})
// request 拦截器,这些直接复制粘贴,都是死的代码,若想更丰富,懂了之后可以添加更多的精彩
service.interceptors.request.use(function(config) {
const data = autograph(config.url, config.data)
if (config.method === 'get') {
config.params = data.query
}
if (config.method === 'post') {
config.data = data.query
}
config.headers = data.headers
return config
}, error => {
console.log(error) // for debug
Promise.reject(error)
})
// response 拦截器
service.interceptors.response.use(
response => {
console.log(response)
return response
},
error => {
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了，你可以在这里加入超时的处理方案')
// return service.request(originalRequest);//例如再重复请求一次
}
}
)
export default service
2.在src文件夹下新建api文件夹,在api文件下内新建index.js文件(存放全部请求,便于管理接口)
import request from '../utils/request' //引入封装好的axios拦截文件
//接口示例 https://elm.cangdu.org/v1(实例的baseURL)+参数
//https://elm.cangdu.org/v1/cities 这是此接口,具体参数需要在第三个步骤拼接
export function banner(data) {
const url = '/cities';
return request({
url: url,
method: 'get',
data
})
}
- 在vue组件内使用接口
<script>
import {banner} from '@/api/index' //引入接口文件,banner为所需接口
export default {
data() {
return {
type: 'guess'
}
},
methods: {
navs(){ //通过navs事件触发接口
banner({ // type为接口所需要的参数
type:this.type ,
// .....拼接的参数
}).then(response =>{
console.log(response)
})
}
}
//请求的接口为 https://elm.cangdu.org/v1/cities?type=guess
}
</script>
这是之前学习中掌握的一个基础的axios封装,如果想要丰富一些,可以考虑结合加载过程展示loading动画
请求都是一个个分开的,严谨起来的可能感觉不是那么好用
