1.src目錄下,新建文件夾utils,在utils內(nèi)新建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 }
}
// 創(chuàng)建axios實例
const service = axios.create({
//請求的地址,也可根據(jù)代碼配置獲取,具體網(wǎng)上查找開發(fā)環(huán)境的地址
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('根據(jù)你設(shè)置的timeout/真的請求超時 判斷請求現(xiàn)在超時了敢课，你可以在這里加入超時的處理方案')
// return service.request(originalRequest);//例如再重復請求一次
}
}
)
export default service
2.在src文件夾下新建api文件夾,在api文件下內(nèi)新建index.js文件(存放全部請求,便于管理接口)
import request from '../utils/request' //引入封裝好的axios攔截文件
//接口示例 https://elm.cangdu.org/v1(實例的baseURL)+參數(shù)
//https://elm.cangdu.org/v1/cities 這是此接口,具體參數(shù)需要在第三個步驟拼接
export function banner(data) {
const url = '/cities';
return request({
url: url,
method: 'get',
data
})
}
- 在vue組件內(nèi)使用接口
<script>
import {banner} from '@/api/index' //引入接口文件,banner為所需接口
export default {
data() {
return {
type: 'guess'
}
},
methods: {
navs(){ //通過navs事件觸發(fā)接口
banner({ // type為接口所需要的參數(shù)
type:this.type ,
// .....拼接的參數(shù)
}).then(response =>{
console.log(response)
})
}
}
//請求的接口為 https://elm.cangdu.org/v1/cities?type=guess
}
</script>
這是之前學習中掌握的一個基礎(chǔ)的axios封裝,如果想要豐富一些,可以考慮結(jié)合加載過程展示loading動畫
請求都是一個個分開的,嚴謹起來的可能感覺不是那么好用
