axios中如何写ajax请求
这篇文章给大家分享的是有关axios中如何写ajax请求的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设公司、程序开发、微网站、成都微信小程序等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站设计制作、网站建设、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。
优点:
增加一个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
感谢各位的阅读!关于“axios中如何写ajax请求”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网站题目:axios中如何写ajax请求
地址分享:http://myzitong.com/article/pceihc.html