axios进阶实践之利用最优雅的方式写ajax请求

(编辑：jimmy 日期: 2024/9/28 浏览：2)

前言

ajax相信不用过多介绍了，作者坚信可以用配置解决的问题，请勿硬编码，下面话不多说了，来一看看详细的介绍吧。

姊妹篇 jQuery进阶：用最优雅的方式写ajax请求

axios是Vue官方推荐的ajax库, 用来取代vue-resource。更多详细的基础知识可以参考这篇文章：https://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"color: #ff0000">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 = /{{([^}]+)"color: #ff0000">4. 在组件中使用




import api from '@/apis/request'
...
  api.login.fire({id: '"htmlcode">

Request URL:http://192.168.40.231:30412/api/security/login"color: #ff0000">5. 更多


有个地方我不是很明白，希望懂的人可以给我解答一下
如果某个组件中只需要login方法，但是我这样写会报错。


import {login} from '@/apis/request' 


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


export var login = api.login 

    
但是这是我不想要的，因为每次增加一个接口，这里都要export一次， 这不符合开放闭合原则，请问有什么更好的方法吗？
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

        
            上一篇：JavaScript实现重力下落与弹性效果的方法分析
            下一篇：vue.js $refs和$emit 父子组件交互的方法

axios进阶实践之利用最优雅的方式写ajax请求

一句话新闻

最新资源