1、安裝

npm install axios --save

2、在main.js中寫入一下代碼

import axios from 'axios' Vue.prototype.axios = axios

3、調用

下面源碼是直接使用axios來調用后臺的接口示例：

this.axios({url: '',//請求地址method:'POST',//請求方法responseType: 'json',//返回值類型params: {arg1: "arg1"//請求攜帶參數} }).then(res => {console.log(res)//請求成功 }).catch(error => {console.log(error);//請求失敗 })

使用攔截器—添加

在src創建util目錄，在里面創建request.js文件

import axios from 'axios';const service = axios.create({baseURL: "http://127.0.0.1:8080/projectName",//請求地址前綴timeout: 0 });// 請求攔截器 service.interceptors.request.use(config => {//添加請求頭部參數config.headers['arg1'] = "arg1Value";return config;},error => {return Promise.reject(error);} );// 響應攔截器 service.interceptors.response.use(response => {//攔截到成功的數據return response.data;},error => {//攔截到失敗的數據return Promise.reject(error);} );export default service;

在src創建api目錄，在里面創建user.js文件

import request from '@/utils/request'; //引入request.jsexport function getUserInfo(data) {return request({url: 'userController/getUserInfo',method: 'post',data: data}); }

4、Vue頁面調用攔截器

<template><div><h1>{{userInfo}}</h1></div> </template><script>//引入apiimport { getUserInfo } from './api/user.js';export default {date(){return{userInfo: {}}},mounted(){const par = {arg1: "arg1Value"};//調用apigetUserInfo(par).then(re=>{//請求成功 返回rethis.userInfo = re.data;}).catch(err=>{//請求失敗})}} </script>

總結

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

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