簡介

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

特點

從瀏覽器中創建 XMLHttpRequests 從 node.js 創建 http 請求 支持 Promise API 攔截請求和響應 轉換請求數據和響應數據 取消請求 自動轉換 JSON 數據 客戶端支持防御 XSRF

安裝

使用 npm:$ npm install axios 使用 bower:$ bower install axios 使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

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', // 統一請求路徑前綴timeout: 15000// 請求超時時間 })service.interceptors.request.use(config => {let sessionId = Cookies.get('X-SESSION-ID') || ''if (sessionId) {config.headers['X-SessionId'] = sessionId // 讓每個請求攜帶自定義token 請根據實際情況自行修改}return config }, err => {Message.error('請求超時')return Promise.reject(err) })// http response 攔截器 service.interceptors.response.use(response => {const data = response.data// 根據返回的code值來做不同的處理(和后端約定)switch (data.code) {case 401:// 未登錄 清除已登錄狀態router.push('/login')return Promise.reject(new Error('401'))case 403:// 沒有權限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) => { // 這里是返回狀態碼不為200時候的錯誤處理Message.error(err.toString())return Promise.reject(err) })export default service

API使用

import request from '@/utils/request'// 所屬區域 export function getListByGroupStartAdminArea () {return request({url: '/area/getListByGroupStartAdminArea'}) }// 直升機信息刪除 export function deleteCopter (data) {return request({url: `/copter/deleteCopter`,method: 'post',data}) }

頁面使用

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

總結

以上是生活随笔為你收集整理的关于axios的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。