Vue封裝axios

什么是axios

• axios 是一個基於 promise 的HTTP庫。
• 支持 promise API。
• 具備請求和響應攔截，以及轉換請求和響應數據。
• 取消請求
• 自動轉換 JSON 數據
• 從node.js 創建 http 請求

安裝axios

使用npm:

npm install axios --save

使用yarn

yarn add axios

使用CDN

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

引入axios

創建 request.js 文件，在文件中映入 axios

import axios from "axios"

創建axios實例

方式一：axios.defaults 全局配置

axios.defaults.baseURL = 'http://localhost.com/api/';
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.timeout = 10000;

方式二：使用axios.create([config]) 創建實例。

const service = axios.create({
	// axios中請求配置有baseURL選項，表示請求URL公共部分： http://localhost.com/api/
	baseURL: process.env.Vue_APP_BASE_API,
	// 請求頭部
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
   	// 超時時間
	timeout: 10000,
})
export default service

請求攔截器

service.interceptors.request.use(config => {
  // 在發送請求之前的處理；比如：設置請求頭部Token
  config.headers['token'] = "token...";
  return config
}, error => {
   // 對請求錯誤的處理
   Promise.reject(error)
})

響應攔截器

service.interceptors.response.use(res => {
  // 對響應數據做處理
  return res.data
},error => {
  // 對響應錯誤做處理
  switch (error.response.status) {
    case 401:
     // 對401的操作
      break;
    case 408:
      // 對408的操作
      break
    case 500:
        // 對500的操作
      break
    default: Promise.reject(error)
  }
})

設置API

創建 api.js 文件，在文件中引入 request.js，並設置API接口

import request from '@/utils/request'
export function userList(data,qurey) {
  return request({
    url: '/user',  // 接口地址
    method: 'POST', // 請求方式
    data: data, // 需要發送個服務去的數據
    params: qurey // url地址拼接的數據
  })
}

在頁面中使用axios

在 user.vue 中引入API，在methods發送請求

import {userList} from '@/api/api'
data() {
  return {
  	// 發送個服務器的數據
  	form:{
  	  username: "Tom",
  	  password: "123456"
  	},
  	qurey: {
  	  page: 1,
  	  limit: 10
  	}
  }
},
methods: {
  getUserList() {
  userList(this.form,this.qurey).then(response => {
  // 對請求返回的數據做處理
  })
}