vue實戰之axios

​前言

今天還将繼續  基于vue、element的項目實戰  這個專題，這一章節将向大家講解http請求的axios封裝，易用、簡潔且高效的http庫。

1、axios的介紹

axios 是一個基于 promise 的 HTTP 庫，可以用在浏覽器和 node.js 中。

2、安裝axios

yarn add axios
           

檢視package.json檔案 "axios": "^0.21.1"

安裝成功

3、使用

在src中建立utils檔案夾，其中建立axios.js檔案

utils是存放一些公共方法（一般情況）

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
// 建立執行個體
let service = axios.create({
  baseURL: testApi, // 接口位址
  timeout: 5000 // 請求逾時時間
})
// 請求攔截器（request)
service.interceptors.request.use(config => {
if (token) { // 此處是登陸傳回的token，添加到請求頭
    config.headers = {
'Authorization': "Token " + token // token值，具體規則和後端定義
    }
  }
return config
}, error => {
Promise.reject(error)
})
// 響應攔截器（respone)
service.interceptors.response.use( response => {
let res = response.data
if (res.code !== 200) { // 具體的參數值按定義修改
    Message({
      message: res.message,
type: 'error',
      duration: 5 * 1000
    })
// 按照後端約定處理錯誤資訊
if (res.code === 500) {
// 邏輯代碼
    } 
return Promise.reject('error')
  } else { // res.code === 200, 成功傳回data
return response.data
  }
},
error => {
  Message({
    message: error.message,
type: "error",
    duration: 5 * 1000
  })
return Promise.reject(error) // 抛出錯誤資訊到前端
})
export default service // 暴露service檔案
           

接下來就是api方法的引用

4、src下建立api檔案夾

子產品接口寫在一起

示例：user.js

import request from '@/utils/axios'
​
export function login(params) {
  return request({
    url: '/test/login', // 接口位址
    method: 'get', // 請求方式mock.js
    data: params // 請求參數
  })
}
           

vue檔案中引用login方法

import { login } from '@/api/user'
// 最後就是調用方法
           

5、注意

所有的參數均需要依據後端接口制定方靈活配置

6、下期預告

前端模拟資料接口工具mock.js的使用

添加小站回複：axios視訊教程，擷取該篇教學視訊。

長按二維碼識别添加小站

1、如果你有好的技術文章。

2、如果你有需要的技術分享主題。

3、如果你有面試上的問題(包括履歷、面試題)

4、那就快來聯系小站，讓小站為你盡心盡力！