開發環境跟腳手架初始完畢后，我們開始配置axios請求后臺接口? ?axios使用說明：https://www.kancloud.cn/yunye/axios/234845

1、本人是在腳手架中的src目錄下新建api文件夾，在新建一個fetch.js 文件用來配置axios以及管理后臺的接口

2、開始安裝axios? npm axios --save 安裝

3、下面的代碼是封住axios后的請求文件

import axios from 'axios' import qs from 'qs'import { Message } from 'element-ui'; const baseURL = '你的請求地址' // 測試地址 axios.defaults.timeout = 10000; //響應時間 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 設置token axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置請求頭 axios.defaults.baseURL = baseURL; //配置接口地址//POST傳參序列化(添加請求攔截器) axios.interceptors.request.use((config) => {// 可以在這里設置請求頭中的token// 這里寫死一個token，你需要在這里取到你設置好的token的值// const token = 'this is a token';// if (token) {// 這里將token設置到headers中，header的key是Authorization，這個key值根據你的需要進行修改即可// config.headers.Authorization = token;// }//在發送請求之前做某件事if(config.method === 'post'){// config.data = qs.stringify(config.data); }return config; },(error) =>{Message({type: 'error',message: "錯誤的傳參"})return Promise.reject(error); });//返回狀態判斷(添加響應攔截器) axios.interceptors.response.use((res) =>{//對響應數據做些事if(res.data.retcode == 0){return res} else if(res.data.retcode == '50021021') {localStorage.removeItem('user_token_key');// localStorage.removeItem('userName');location.href = '#/login';} else {Message({type: 'error',message: res.data.retmsg})// return Promise.reject(res);return res} }, (error) => {console.log(error)Message({type: 'error',message: "網絡異常"})return Promise.reject(error); })//返回一個Promise(發送post請求) export function fetchPost(url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(response => {resolve(response.data);}, err => {reject(err);}).catch((error) => {reject(error)})}) } // 返回一個Promise(發送get請求) export function fetchGet(url, param) {return new Promise((resolve, reject) => {axios.get(url, {params: param}).then(response => {resolve(response.data)}, err => {reject(err)}).catch((error) => {reject(error)})}) }export default {/*** 用戶登錄*/Login(params) {return fetchPost('/useraction/login', params)}, }

?

轉載于:https://www.cnblogs.com/huangqiangblog/p/9523807.html

總結

以上是生活随笔為你收集整理的记一次vue+vuex+vue-router+axios+elementUI开发（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

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