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

之前给大家介绍了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一次， 这不符合开放闭合原则，请问有什么更好的方法吗？

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

相关文章：