之前給大家介紹了jQuery利用最優雅的方式寫ajax請求的相關內容，這篇文章主要給大家介紹了關於axios進階實踐之利用最優雅的方式寫ajax請求的相關資料，文中通過示例程式碼介紹的非常詳細，對大家的學習或工作有一定的參考學習價值，需要的朋友們下面來一起看看吧。
前言
ajax相信不用多介紹了，作者堅信可以用設定解決的問題，請勿硬編碼，下面話不多說了，來一看看詳細的介紹吧。
姊妹篇 jQuery進階：用最優雅的方式寫ajax請求
axios是Vue官方推薦的ajax函式庫, 用來取代vue-resource。更多詳細的基礎知識可以參考這篇文章：//www.jb51.net/article/109444.htm
優點：
增加一個ajax接口，只需要在設定檔裡多寫幾行就可以
不需要在元件中寫axios調用，直接調用api方法，很方便
如果介面有調整，只需要修改介面設定檔就可以
#統一管理介面設定
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: '用户名或者密码错误'
}
}
]
}#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 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具
// 例如render('/{{userId}}/{{type}}/{{query}}', {userId:1,type:2, query:3})
// 会被渲染成 /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, 会动态绑定到每个接口上
function fire (query = {}, payload = '') {
// qs 特别处理 formData类型的数据
if (this.contentType === contentType.formData) {
payload = qs.stringify(payload)
}
// 直接返回axios实例，方便调用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'
})
...登入後複製
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. 更多有個地方我不是很明白，希望懂的人可以給我解答一下
如果某個元件中只需要login方法，但是我這樣寫會報錯。
import {login} from '@/apis/request'這樣寫的前提是要在request.js最後寫上
export var login = api.login
但是這是我不想要的，因為每次增加一個接口，這裡都要export一次， 這不符合開放閉合原則，請問有更好的方法嗎？
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
使用nodejs如何實作gulp打包詳細解讀Angular5.1新功能#如何使用vuex實作選單管理以上是使用axios如何實現ajax請求（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
