源代碼?

import axios from 'axios' /*** Element UI 消息框*/ import { MessageBox, Message } from 'element-ui'/*** create an axios instance* 創建axios的實例* @type {AxiosInstance | Domain | * | void}*/ const service = axios.create({/*** Basic URL* 請求URL前綴* url = base url + request url*/baseURL: process.env.VUE_APP_BASE_API,/*** send cookies when cross-domain requests*/// withCredentials: true,/*** request timeout* 請求時間限制*/timeout: 5000 })/*** request interceptor* 請求攔截器*/ service.interceptors.request.use(/*** do something before request is sent* 處理請求* 1、序列化* 2、token* 3、loading動畫* @param config* @returns {AxiosRequestConfig}*/config => {return config},/*** do something with request error* 請求失敗* @param error* @returns {Promise<never>}*/error => {console.log(error) // for debugconsole.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)} )/*** response interceptor* 響應攔截器*/ service.interceptors.response.use(/*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code* 處理響應* If you want to get http information such as headers or status* 如果需要HTTP Response的信息* Please return response => response** @param response* @returns {AxiosResponse}*/response => {return response},/*** do something with response error* 響應失敗* @param error* @returns {Promise<never>}*/error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)} )export default service

DEMO

import request from '@/utils/request' request.post('xxx').then(res => {console.log(res)}) request.get('http://api.help.bj.cn/apis/weather/',{params:{id:'101060101'}}).then(res => {console.log(res.data.city)})

參考文章

https://www.cnblogs.com/hs610/p/10842866.html

https://www.cnblogs.com/0616--ataozhijia/p/11351495.html

https://blog.csdn.net/wenmin1987/article/details/81635723

總結

以上是生活随笔為你收集整理的Axios——Axios封装DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。