關(guān)于axios

ddongjian0000 發(fā)布于2019-08-23 15:09 / 1093人閱讀

摘要：簡介是一個基于的庫，可以用在瀏覽器和中主要是用于向后臺發(fā)起請求的，還有在請求中做更多是可控功能。

簡介

axios是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
主要是用于向后臺發(fā)起請求的，還有在請求中做更多是可控功能。

特點

從瀏覽器中創(chuàng)建 XMLHttpRequests
從 node.js 創(chuàng)建 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換 JSON 數(shù)據(jù)
客戶端支持防御 XSRF

安裝

使用 npm:

$ npm install axios
使用 bower:

$ bower install axios
使用 cdn:

使用

import axios from "axios"
import router from "../router/index"
import Message from "ant-design-vue/es/message"
import Cookies from "js-cookie"

const service = axios.create({
  baseURL: "/api", // 統(tǒng)一請求路徑前綴
  timeout: 15000// 請求超時時間
})

service.interceptors.request.use(config => {
  let sessionId = Cookies.get("X-SESSION-ID") || ""
  if (sessionId) {
    config.headers["X-SessionId"] = sessionId // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
  }
  return config
}, err => {
  Message.error("請求超時")
  return Promise.reject(err)
})

// http response 攔截器
service.interceptors.response.use(response => {
  const data = response.data
  // 根據(jù)返回的code值來做不同的處理(和后端約定)
  switch (data.code) {
    case 401:
      // 未登錄 清除已登錄狀態(tài)
      router.push("/login")
      return Promise.reject(new Error("401"))
    case 403:
      // 沒有權(quán)限
      if (data.message !== null) {
        Message.error(data.message)
      } else {
        Message.error("未知錯誤")
      }
      return Promise.reject(new Error("未知錯誤"))
    case 500:
      // 錯誤
      if (data.message !== null) {
        Message.error(data.message)
      } else {
        Message.error("未知錯誤")
      }
      // return Promise.reject(new Error("未知錯誤"))
      return Promise.reject(data.message)
    default:
      return data
  }
}, (err) => { // 這里是返回狀態(tài)碼不為200時候的錯誤處理
  Message.error(err.toString())
  return Promise.reject(err)
})

export default service

API使用

import request from "@/utils/request"

// 所屬區(qū)域
export function getListByGroupStartAdminArea () {
  return request({
    url: "/area/getListByGroupStartAdminArea"
  })
}

// 直升機信息刪除
export function deleteCopter (data) {
  return request({
    url: `/copter/deleteCopter`,
    method: "post",
    data
  })
}

頁面使用

// 獲取區(qū)域列表
    _getListByGroupStartAdminArea () {
      getListByGroupStartAdminArea().then(res => {
        this.options = res.payload
      })
    },

// 刪除直升機信息
    handleDelete(record) {
      let copter = this
      this.$confirm({
        title: "直升機信息刪除",
        content: "請確認是否將此直升機刪除？",
        okText: "確定",
        cancelText: "取消",
        onOk() {
          deleteCopter({
            id: record
          }).then(res => {
            copter.$message.error("刪除成功!")
            copter._getCopterList()
          })
        },
        onCancel() {}
      })
    },