1、安裝

npm install axios --save

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

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

3、調(diào)用

下面源碼是直接使用axios來調(diào)用后臺的接口示例：

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

使用攔截器—添加

在src創(chuàng)建util目錄，在里面創(chuàng)建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 => {//添加請求頭部參數(shù)config.headers['arg1'] = "arg1Value";return config;},error => {return Promise.reject(error);} );// 響應攔截器 service.interceptors.response.use(response => {//攔截到成功的數(shù)據(jù)return response.data;},error => {//攔截到失敗的數(shù)據(jù)return Promise.reject(error);} );export default service;

在src創(chuàng)建api目錄，在里面創(chuàng)建user.js文件

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

4、Vue頁面調(diào)用攔截器

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。