前言
ajax相信不用过多介绍了，作者坚信可以用配置解决的问题，请勿硬编码，下面话不多说了，来一看看详细的介绍吧。
姊妹篇 jquery进阶：用最优雅的方式写ajax请求
axios是vue官方推荐的ajax库, 用来取代vue-resource。更多详细的基础知识可以参考这篇文章：//www.jb51.net/article/109444.htm
优点：
增加一个ajax接口，只需要在配置文件里多写几行就可以
不需要在组件中写axios调用，直接调用api方法，很方便
如果接口有调整，只需要修改一下接口配置文件就可以
统一管理接口配置
1. content-type配置
// filename: content-type.jsmodule.exports = { formdata: 'application/x-www-form-urlencoded; charset=utf-8', json: 'application/json; charset=utf-8'}
2. api 配置
// filename: api-sdk-conf.jsimport 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.jsimport 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/3function 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/loginheiheiheirequest method:poststatus code:200 okremote address:192.168.40.231:30412referrer policy:no-referrer-when-downgradepost /api/security/loginheiheihei http/1.1host: 192.168.40.231:30412connection: keep-alivecontent-length: 47accept: application/json, text/plain, */*origin: http://localhost:8080contenttype: application/x-www-form-urlencoded; charset=utf-8user-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.36content-type: application/x-www-form-urlencodedreferer: http://localhost:8080/accept-encoding: gzip, deflateaccept-language: zh-cn,zh;q=0.9,en;q=0.8username=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请求（详细教程）的详细内容。