axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:23:22

axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求

axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求:前言 ajax相信不用過多介紹了，作者堅(jiān)信可以用配置解決的問題，請(qǐng)勿硬編碼，下面話不多說了，來一看看詳細(xì)的介紹吧。姊妹篇 jQuery進(jìn)階：用最優(yōu)雅的方式寫ajax請(qǐng)求 axios是Vue官方推薦的ajax庫, 用來取代vue-resource。更多詳細(xì)的基礎(chǔ)知識(shí)可以參考這

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求:前言 ajax相信不用過多介紹了，作者堅(jiān)信可以用配置解決的問題，請(qǐng)勿硬編碼，下面話不多說了，來一看看詳細(xì)的介紹吧。姊妹篇 jQuery進(jìn)階：用最優(yōu)雅的方式寫ajax請(qǐng)求 axios是Vue官方推薦的ajax庫, 用來取代vue-resource。更多詳細(xì)的基礎(chǔ)知識(shí)可以參考這

前言

ajax相信不用過多介紹了，作者堅(jiān)信可以用配置解決的問題，請(qǐng)勿硬編碼，下面話不多說了，來一看看詳細(xì)的介紹吧。

姊妹篇 jQuery進(jìn)階：用最優(yōu)雅的方式寫ajax請(qǐng)求

axios是Vue官方推薦的ajax庫, 用來取代vue-resource。更多詳細(xì)的基礎(chǔ)知識(shí)可以參考這篇文章：//www.gxlcms.com/article/109444.htm

優(yōu)點(diǎn)：

增加一個(gè)ajax接口，只需要在配置文件里多寫幾行就可以

不需要在組件中寫axios調(diào)用，直接調(diào)用api方法，很方便

如果接口有調(diào)整，只需要修改一下接口配置文件就可以

統(tǒng)一管理接口配置

1. content-type配置

// filename: content-type.js
module.exports = {
 formData: 'application/x-www-form-urlencoded; charset=UTF-8',
 json: 'application/json; charset=UTF-8'
}

2. api 配置

// filename: api-sdk-conf.js
import contentType from './content-type'
export default {
 baseURL: 'http://192.168.40.231:30412',
 apis: [
 {
 name: 'login',
 path: '/api/security/login?{{id}}',
 method: 'post',
 contentType: contentType.formData,
 status: {
 401: '用戶名或者密碼錯(cuò)誤'
 }
 }
 ]
}

3. request.js 方法

// request.js
import axios from 'axios'
import qs from 'qs'
import contentType from '@/config/content-type'
import apiConf from '@/config/api-sdk-conf'
var api = {}
// render 函數(shù)用來渲染路徑上的變量, 算是一個(gè)微型的模板渲染工具
// 例如render('/{{userId}}/{{type}}/{{query}}', {userId:1,type:2, query:3})
// 會(huì)被渲染成 /1/2/3
function render (tpl, data) {
 var re = /{{([^}]+)?}}/
 var match = ''
 while ((match = re.exec(tpl))) {
 tpl = tpl.replace(match[0], data[match[1]])
 }
 return tpl
}
// fire中的this, 會(huì)動(dòng)態(tài)綁定到每個(gè)接口上
function fire (query = {}, payload = '') {
 // qs 特別處理 formData類型的數(shù)據(jù)
 if (this.contentType === contentType.formData) {
 payload = qs.stringify(payload)
 } 
 // 直接返回axios實(shí)例，方便調(diào)用then,或者catch方法
 return axios({
 method: this.method,
 url: render(this.url, query),
 data: payload,
 headers: {
 contentType: this.contentType
 }
 })
}
apiConf.apis.forEach((item) => {
 api[item.name] = {
 url: apiConf.baseURL + item.path,
 method: item.method,
 status: item.status,
 contentType: item.contentType,
 fire: fire
 }
})
export default api

4. 在組件中使用

import api from '@/apis/request'
...
 api.login.fire({id: '?heiheihei'}, {
 username: 'admin',
 password: 'admin',
 namespace: '_system'
 })
...

瀏覽器結(jié)果：

Request URL:http://192.168.40.231:30412/api/security/login??heiheihei
Request Method:POST
Status Code:200 OK
Remote Address:192.168.40.231:30412
Referrer Policy:no-referrer-when-downgrade
POST /api/security/login??heiheihei HTTP/1.1
Host: 192.168.40.231:30412
Connection: keep-alive
Content-Length: 47
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
contentType: application/x-www-form-urlencoded; charset=UTF-8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
username=admin&password=admin&namespace=_system

5. 更多

有個(gè)地方我不是很明白，希望懂的人可以給我解答一下

如果某個(gè)組件中只需要login方法，但是我這樣寫會(huì)報(bào)錯(cuò)。