使用axios如何实现ajax请求（详细教程）-tutorial js-php.cn

使用axios如何实现ajax请求（详细教程）

亚连

Lepaskan： 2018-06-19 16:09:07

asal

1966 orang telah melayarinya

之前给大家介绍了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: &#39;application/x-www-form-urlencoded; charset=UTF-8&#39;,
 json: &#39;application/json; charset=UTF-8&#39;
}

Salin selepas log masuk

2. api 配置

// filename: api-sdk-conf.js
import contentType from &#39;./content-type&#39;
export default {
 baseURL: &#39;http://192.168.40.231:30412&#39;,
 apis: [
 {
  name: &#39;login&#39;,
  path: &#39;/api/security/login?{{id}}&#39;,
  method: &#39;post&#39;,
  contentType: contentType.formData,
  status: {
  401: &#39;用户名或者密码错误&#39;
  }
 }
 ]
}

Salin selepas log masuk

3. request.js 方法

// request.js
import axios from &#39;axios&#39;
import qs from &#39;qs&#39;
import contentType from &#39;@/config/content-type&#39;
import apiConf from &#39;@/config/api-sdk-conf&#39;
var api = {}
// render 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具
// 例如render(&#39;/{{userId}}/{{type}}/{{query}}&#39;, {userId:1,type:2, query:3})
// 会被渲染成 /1/2/3
function render (tpl, data) {
 var re = /{{([^}]+)?}}/
 var match = &#39;&#39;
 while ((match = re.exec(tpl))) {
 tpl = tpl.replace(match[0], data[match[1]])
 }
 return tpl
}
// fire中的this, 会动态绑定到每个接口上
function fire (query = {}, payload = &#39;&#39;) {
 // 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

Salin selepas log masuk

4. 在组件中使用

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

Salin selepas log masuk

浏览器结果：

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

Salin selepas log masuk

5. 更多

有个地方我不是很明白，希望懂的人可以给我解答一下

如果某个组件中只需要login方法，但是我这样写会报错。

import {login} from &#39;@/apis/request&#39;

Salin selepas log masuk

这样写的前提是要在request.js最后写上

export var login = api.login

Salin selepas log masuk

但是这是我不想要的，因为每次增加一个接口，这里都要export一次，这不符合开放闭合原则，请问有什么更好的方法吗？

上面是我整理给大家的，希望今后会对大家有帮助。

使用nodejs如何实现gulp打包

详细解读Angular5.1新功能

如何使用vuex实现菜单管理

Atas ialah kandungan terperinci 使用axios如何实现ajax请求（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!