北京工商大学录取分数线,中华狂澜,魏千翔娄艺潇结婚照
前言
ajax相信不用过多介绍了，作者坚信可以用配置解决的问题，请勿硬编码，下面话不多说了，来一看看详细的介绍吧。
姊妹篇 jquery进阶：
axios是vue官方推荐的ajax库, 用来取代vue-resource。更多详细的基础知识可以参考这篇文章：
优点：
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一次， 这不符合开放闭合原则，请问有什么更好的方法吗？
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论