基于axios在vue中的使用

更新時(shí)間：2022年03月29日 14:21:31 作者：前端報(bào)刊

這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、Axios是什么

Axios是一個(gè)基于promise的HTTP庫（類似于jQuery的Ajax，用于HTTP請求）
可以用于瀏覽器和node.js（既可以用于客戶端也可以用于node.js編寫的服務(wù)端）

二、Axios有哪些特性

支持promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
客戶端支持防御 XSRF

三、Axios瀏覽器支持

四、安裝

1.使用 npm

$ npm install axios

2.使用 bower

$ bower install axios

3.使用 cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

五、用法（vue項(xiàng)目已搭建）

1. Axios基礎(chǔ)用法

（get、post、put 等請求方法）

先介紹一下，Axios常用的幾種請求方法有哪些：get、post、put、patch、delete

get：（一般用于）獲取數(shù)據(jù)
post：提交數(shù)據(jù)（表單提交+文件上傳）
put：更新（或編輯）數(shù)據(jù)（所有數(shù)據(jù)推送到后端（或服務(wù)端））
patch：更新數(shù)據(jù)（只將修改的數(shù)據(jù)推送到后端）
delete：刪除數(shù)據(jù)

題外話，一般公司在實(shí)際開發(fā)項(xiàng)目過程中：

（1）post：一般用于新建

（2）put：一般用于更新（適合數(shù)據(jù)量比較少的更新）

（3）patch：一般用于數(shù)據(jù)量比較大；假如一個(gè)表單的數(shù)據(jù)量很大，有很多項(xiàng)，使用put的話，全部數(shù)據(jù)推送一次是比較耗性能的，這個(gè)時(shí)候可以考慮用patch，只將修改的數(shù)據(jù)推送到后端

以上這些題外話，只是一般的常規(guī)用法，不能代表一定要這樣用；當(dāng)然了，你可能會(huì)說我用post來獲取數(shù)據(jù)，行不行？這個(gè)當(dāng)然行了，絕對沒問題！具體怎么用還是前后端一起商量著決定，以免發(fā)生不愉快的肢體沖突！

哈哈哈，嚴(yán)重了啊，開個(gè)玩笑！

（1）get 請求

<template>
? <div>
? ? <div>mmmm</div>
? </div>
</template>
?
<script>
import axios from 'axios'
?
// get 請求
export default {
? name: "get",
? created() {
?
? ? //第一種寫法叫做get別名請求方法
? ? //http://localhost:8080/static/data.json?id=1
? ? axios.get('../../static/data.json', {
? ? ? params: {//有參數(shù)時(shí),若無參數(shù)時(shí)直接省略不寫
? ? ? ? id: 1
? ? ? }
? ? }).then((res) => {
? ? ? console.log('數(shù)據(jù)：', res);
? ? })
?
? ? //第二種寫法
? ? axios({
? ? ? method: 'get',
? ? ? url: '../../static/data.json',
? ? ? params: {
? ? ? ? id: 1
? ? ? }
? ? }).then((res) => {
? ? ? console.log('數(shù)據(jù)：', res)
? ? })
? }
}
</script>
?
<style scoped>
?
</style>

下面了解一下請求信息---

Status Code:304 Not Modified---304是重定向；正常情況下，第一次訪問接口的時(shí)候返回的都是200；當(dāng)你第二次訪問接口的時(shí)候，如果數(shù)據(jù)沒有變化，那么瀏覽器會(huì)自動(dòng)識(shí)別返回一個(gè)狀態(tài)304，代表數(shù)據(jù)沒有更改、重定向；相當(dāng)于重定向到你剛剛訪問的資源，這樣的話會(huì)加載更快！

（2） post 請求

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// post 請求
export default {
  name: "post",
  created() {
 
    /*
    post常用的請求數(shù)據(jù)（data）格式有兩種：
    （1）applicition/json
    （2）form-data 表單提交（圖片上傳，文件上傳）
     */
 
    //第一種寫法叫做post別名請求方法
    // http://localhost:8080/static/data.json?id=1
    // applicition/json 請求
    let data = {
      id: 1
    }
    axios.post('../../static/data.json', data)
      .then((res) => {
        console.log('數(shù)據(jù)：', res);
      })
    //第二種寫法
    axios({
      method: 'post',
      url: '../../static/data.json',
      data: data,
    }).then((res) => {
      console.log('數(shù)據(jù)：', res)
    })
    // form-data 請求
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    }
    axios.post('../../static/data.json', formData)
      .then((res) => {
        console.log('數(shù)據(jù)：', res);
      })
  }
}
</script>
 
<style scoped>
 
</style>

了解一下，post兩種請求方式的Content-Type和參數(shù)有哪些不同---

applicition/json：如下圖

form-data：如下圖

（3）put、patch 請求

說明一下，put和patch請求與post請求用法一樣類似，同樣有applicition/json和form-data，為了節(jié)省時(shí)間就不過多贅述了，簡單寫一下！

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// put、patch 請求
export default {
  name: "put，patch",
  created() {
 
    let data = {
      id: 1
    }
    // put 請求
    axios.put('../../static/data.json', data)
      .then((res) => {
        console.log('數(shù)據(jù)：', res);
      })
    // patch 請求
    axios.patch('../../static/data.json', data)
      .then((res) => {
        console.log('數(shù)據(jù)：', res);
      })
  }
}
</script>
 
<style scoped>
 
</style>

（4）delete 請求

delete請求與前四種請求稍有一點(diǎn)不同：delete請求有時(shí)候需要把參數(shù)拼接到URL上，有時(shí)候像post請求那樣把參數(shù)放在請求體里面。至于具體怎么調(diào)用，需要和后端商量好！

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// delete 請求
export default {
  name: "delete",
  created() {
 
    // delete 請求
    axios.delete('../../static/data.json', {
      params: {// 把參數(shù)拼接到URL上
        id: 1
      }
    })
      .then((res) => {
        console.log('數(shù)據(jù)：', res);
      })
 
    axios.delete('../../static/data.json', {
      data: {// 把params改成data，把參數(shù)放在請求體里面
        id: 1
      }
    })
      .then((res) => {
        console.log('數(shù)據(jù)：', res);
      })
    // 不用別名方法
    axios({
      method: 'delete',
      url: '../../static/data.json',
      //params: {id: 1},// 把參數(shù)拼接到URL上
      data: {id: 1}// 把參數(shù)放在請求體里面
    }).then((res) => {
      console.log('數(shù)據(jù)：', res)
    })
  }
 
}
</script>
 
<style scoped>
 
</style>

了解一下，把參數(shù)拼接到URL上和放在請求體里面有什么不同---

params（把參數(shù)拼接到URL上），如下圖：

data（把參數(shù)放在請求體里面），如下圖：

（5）并發(fā)請求

并發(fā)請求：同時(shí)進(jìn)行多個(gè)請求，并統(tǒng)一處理返回值。

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// 并發(fā)請求
export default {
  name: "get",
  created() {
 
    // 并發(fā)請求用到了axios的兩個(gè)方法：axios.all('參數(shù)是一個(gè)數(shù)組')、axios.spread('回調(diào)函數(shù)')
    axios.all([
      axios.get('../../static/data.json'),
      axios.get('../../static/city.json')
    ]).then(axios.spread((dataRes, cityRes) => {
      console.log(dataRes, cityRes)
    }))
  }
}
</script>
 
<style scoped>
 
</style>

2. Axios進(jìn)階用法

（實(shí)例、配置、攔截器、取消請求等）

（1）axios實(shí)例和配置

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
// axios 實(shí)例
// 后端接口地址有多個(gè)，并且超時(shí)時(shí)長不一樣
export default {
  name: "get",
  created() {
    //創(chuàng)建axios實(shí)例
    let instance = axios.create({//參數(shù)配置
      baseURL: 'http://localhost:8080',//請求的域名(或基本地址)
      timeout: 3000,//請求的超時(shí)時(shí)長(默認(rèn)：1000毫秒(ms)，超過這個(gè)時(shí)長會(huì)報(bào)401超時(shí))
      //url: '../../static/data.json',//請求的路徑
      //method: 'get',//請求方法
      headers: {//設(shè)置請求頭(給請求頭添加一些參數(shù))
        token: ''
      },
      //params: {id: 1},//請求參數(shù)拼接在URL上
      //data: {id: 1}//請求參數(shù)放在請求體
    })
    instance.get('../../static/data.json', {
      params: {
        id: 1
      }
    })
      .then((res) => {
        console.log(res)
      })
    //假如有兩個(gè)域名或設(shè)置超時(shí)時(shí)長不一樣，你可以再創(chuàng)建一個(gè)axios實(shí)例
    let instance2 = axios.create({
      baseURL: 'http://localhost:9090',
      timeout: 5000
    })
    instance2.get('../../static/data.json', {
      params: {
        id: 1
      }
    })
      .then((res) => {
        console.log(res)
      })
 
    //1.axios全局配置
    axios.defaults.baseURL = 'http://localhost:8080';
    axios.defaults.timeout = 3000;
    //2.axios實(shí)例配置
    let instance = axios.create();
    instance.defaults.timeout = 4000;
    //3.axios請求配置
    instance.get('../../static/data.json', {
      timeout: 6000
    })
      .then((res) => {
        console.log(res)
      })
    //優(yōu)先級從低到高：1.axios全局配置 < 2.axios實(shí)例配置 < 3.axios請求配置
  }
}
</script>
 
<style scoped>
 
</style>

（2）攔截器

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
// 攔截器：在請求或響應(yīng)被處理前攔截它們
// 請求攔截器、響應(yīng)攔截器
export default {
  name: "get",
  created() {
    //請求攔截器
    axios.interceptors.request.use(config => {
      //在發(fā)送請求前做些什么
      return config;
    }, err => {
      //在請求錯(cuò)誤的時(shí)候做些什么
      return Promise.reject(err);
    })
 
    //響應(yīng)攔截器
    axios.interceptors.response.use(res => {
      //請求成功對響應(yīng)數(shù)據(jù)做處理
      return res;
    }, err => {
      //響應(yīng)錯(cuò)誤做些什么
      return Promise.reject(err);
    })
 
    //取消攔截器(了解)
    let interceptors = axios.interceptors.request.use(config => {
      config.headers = {
        auth: true
      }
      return config;
    })
    axios.interceptors.request.eject(interceptors);
 
    //例子：登錄狀態(tài)（token:''） 需要登錄的接口
    let instance = axios.create({});
    instance.interceptors.request.use(config => {
      config.headers.token = '';
      // config.headers = {//這種寫法會(huì)覆蓋掉headers中的其他參數(shù)，導(dǎo)致headers中只包含token這一個(gè)參數(shù)，所以不建議這種寫法
      //   token: ''
      // }
      return config;
    }, err => {
      return Promise.reject(err);
    })
 
    //移動(dòng)端彈窗
    let instance_phone = axios.create({});
    instance_phone.interceptors.request.use(config => {
      $('#modal').show();
      return config;
    })
    instance_phone.interceptors.response.use(res => {
      $('#modal').hide();
      return res;
    })
  }
}
</script>
 
<style scoped>
 
</style>

3.Axios進(jìn)一步封裝

在項(xiàng)目中的實(shí)際應(yīng)用

在vue項(xiàng)目中，和后臺(tái)交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中。axios有很多優(yōu)秀的特性，例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御XSRF等。

在一個(gè)完整的項(xiàng)目中，和服務(wù)端的交互會(huì)很頻繁，一個(gè)項(xiàng)目會(huì)有很多請求，冗余代碼很多。所以將請求封裝，統(tǒng)一管理還是很有必要的。

本文介紹的axios的封裝主要目的就是在幫助我們簡化項(xiàng)目代碼和利于后期的更新維護(hù)。

（1）第一步：src/api/request.js

import axios from 'axios'
// import Vue from 'vue';
// import store from '../store';
// import {router} from '../router/index';
 
// let vm = new Vue();
 
const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 3000,
  // headers: {
  //   post: {
  //     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  //   }
  // }
})
 
// 請求攔截
instance.interceptors.request.use(config => {
  // 自定義header，可添加項(xiàng)目token
  // if (store.state.app.token) {
  //   config.headers.token = store.state.app.token;
  //   config.headers.timestamp = new Date().getTime();
  // }
  return config;
}, error => {
  return Promise.reject(error);
})
 
// 響應(yīng)攔截
instance.interceptors.response.use(response => {
  // const resCode = response.status;
  // if (resCode === 200) {
  //   return Promise.resolve(response);
  // } else {
  //   return Promise.reject(response);
  // }
  return response;
}, error => {
  // const resCode = error.response.status;
  // switch (resCode) {
  //   case 401:
  //     vm.$Message.error(error.response.data.message);
  //     store.commit('logout', this);
  //     store.commit('clearOpenedSubmenu');
  //     // console.log('token-0', store.state.app.token);
  //     router.replace({
  //       name: 'login'
  //     });
  //     break;
  //   case 404:
  //     vm.$Message.error('網(wǎng)絡(luò)請求不存在');
  //     break;
  //   case 500:
  //     vm.$Message.error('服務(wù)器連接錯(cuò)誤');
  //     break;
  //   // 其他狀態(tài)碼錯(cuò)誤提示
  //   default:
  //     vm.$Message.error(error.response.data.message);
  // }
  return Promise.reject(error);
})
 
/*
 *封裝get方法
 *@param{String} url [請求地址]
 *@param{Object} params 請求參數(shù)
 */
export function Get(url, params) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 
/**
 *封裝post方法
 *@param{String} url 請求地址
 *@param{Object} params 請求參數(shù)
 */
export function Post(url, params) {
  return new Promise((resolve, reject) => {
    instance.post(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 
/**
 *封裝put方法
 *@param{String} url 請求地址
 *@param{Object} params 請求參數(shù)
 */
export function Put(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 
/**
 *封裝patch方法
 *@param{String} url 請求地址
 *@param{Object} params 請求參數(shù)
 */
export function Patch(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 
/**
 *封裝delete方法
 *@param{String} url [請求地址]
 *@param{Object} params [請求參數(shù)]
 */
export function Delete(url, params) {
  return new Promise((resolve, reject) => {
    instance.delete(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

（2）第二步：src/api/index.js

import {Get,Post,Put,Patch,Delete} from "@/api/request";
 
export default {
  getListData: (params) => {
    return Get('../../static/data.json',params);
  },
  postListData: (params) => {
    return Post('../../static/data.json',params);
  },
  deleteListData: (params) => {
    return Delete('../../static/data.json',params);
  }
}

（3）第三步：src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import Api from './api/index';
 
Vue.config.productionTip = false
Vue.prototype.$axios = Api;
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

（4）第四步：src/components/HelloWorld.vue

<template>
 
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {
    getData() {
      let data = {
        id: 1
      }
      this.$axios.getListData(data)
        .then((res) => {
          console.log(res);
        })
    },
    postData() {
      let data = {
        id: 1,
        msg: 2
      }
      this.$axios.postListData(data)
        .then((res) => {
          console.log(res);
        })
    },
    postFormData() {
      let data = {
        id: 1,
        msg: 2
      }
      let formData = new FormData();
      for (let key in data) {
        formData.append(key, data[key]);
      }
      this.$axios.postListData(formData)
        .then((res) => {
          console.log(res);
        })
    },
    deleteData() {
      let data = {
        id: 1
      }
      this.$axios.deleteListData(data)
        .then((res) => {
          console.log(res);
        })
    },
  },
  created() {
    this.getData();
    this.postData();
    this.postFormData();
    this.deleteData();
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: