原文链接:https://www.jianshu.com/p/73585303fdc0

公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方法,以备以后也能优雅的使用。

ajax.js:

/*引入axios*/
import axios from 'axios' /*创建axios实例对象*/
const ajax = axios.create({
baseURL: ajaxUrl,
timeout: 30000
}) /*请求拦截器(请求之前的操作)*/
ajax.interceptors.request.use(
config => {
return config
},
/*错误操作*/
err => {
return Promise.reject(err)
}
) /*请求之后的操作*/
ajax.interceptors.response.use(
config => {
return config
},
err => {
return Promise.reject(err)
}) /*导出模块*/
export default ajax

api.js:

import ajax from '../libs/ajax'

const captcha = () => {
return ajax.get(`app/captcha`)
}
const login = (params) => {
return ajax.post(`auth/login`, params)
} const apiList = {
captcha,
login
} export default apiList

index.js:
将导出的api请求挂在到vue原型上

import apiList from './api'

const install = function (Vue) {
if (install.installed) return
install.installed = true /*定义属性到Vue原型中*/
Object.defineProperties(Vue.prototype, {
$api: {
get () {
return apiList
}
}
})
} export default {
install
}

main.js:

/*引入index.js*/
import api from '.xxx' Vue.use(api)

按以上模板进行封装之后,就可以在需要的地方直接发起api请求了,如下:

this.$api.login(params).then(res => {
/*请求成功后的操作*/
}).catch(err => {
/*请求失败后的操作*/
})

使用axios优雅的发起网络请求的更多相关文章

  1. android4.0 HttpClient 以后不能在主线程发起网络请求

    android4.0以后不能在主线程发起网络请求,该异步网络请求. new Thread(new Runnable() { @Override public void run() { // TODO ...

  2. iOS swift HandyJSON组合Alamofire发起网络请求并转换成模型

    在swift开发中,发起网络请求大部分开发者应该都是使用Alamofire发起的网络请求,至于请求完成后JSON解析这一块有很多解决方案,我们今天这里使用HandyJSON来解析请求返回的数据并转化成 ...

  3. 木马——本质就是cs socket远程控制,反弹木马是作为c端向外发起网络请求

    摘自:http://kczxsp.hnu.edu.cn/upload/20150504165623705.pdf 里面对于木马的实验过程写得非常清楚,值得一看.   木马是隐藏在正常程序中的具有特殊功 ...

  4. vue 如何发起网络请求 之 axios

    1   1 2 3 4 5 6 7 8 9 10 // axios 请求  在main.js里边写入 import Axios from 'axios'   // 配置请求信息 var $http = ...

  5. thinkphp发起网络请求

    常规做法使用CURL方法: private function http_request($url,$data = null,$headers=array()){ $curl = curl_init() ...

  6. uniapp 发起网络请求

    推荐下我写的uni-http 创建http-config.js import Vue from 'vue' const BASE_URL = 'http://xxx.com'; if (process ...

  7. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

  8. 造轮子 | 怎样设计一个面向协议的 iOS 网络请求库

    近期开源了一个面向协议设计的网络请求库 MBNetwork,基于 Alamofire 和 ObjectMapper 实现,目的是简化业务层的网络请求操作. 须要干些啥 对于大部分 App 而言,业务层 ...

  9. Jest中Mock网络请求

    Jest中Mock网络请求 最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能会一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下 ...

随机推荐

  1. PHP正则验证类

    项目中经常使用到的验证,很使用的.查看与下载<?php /** * 验证类 * * @lastmodify 2015-12-19 * @author wuheng */ class Verify ...

  2. [pig] pig 基础使用

    1.pig运行模式 本地模式: pig -x local 直接访问本地磁盘 集群模式: pig  或者 pig -x mapreduce 2.pig latin 交互 帮助信息 help 上传本地文件 ...

  3. 如何用AJax提交name[]数组?

    https://www.cnblogs.com/junzilan/p/5424120.html

  4. 启动Mysql数据库报错误:-bash: ./start.sh: Permission denied

    linux下安装好Mysql数据库后,输入启动命令: cd /home/homework/mysql && ./start.sh 回车后报如下错误: 原因是:该文件未有相关执行权限 解 ...

  5. 算法提高 最小方差生成树(Kruskal)_模板

     算法提高 最小方差生成树   时间限制:1.0s   内存限制:256.0MB        问题描述 给定带权无向图,求出一颗方差最小的生成树. 输入格式 输入多组测试数据.第一行为N,M,依次是 ...

  6. 【C++ 模板迭代器实例/半素数】

    题目:判断一个数是不是两个素数的乘积,是输出YES,不是输出NO.数据范围为2-1000000. 为了解决这个问题,我们继续使用STL——vector & set,分别用来存储素数和半素数.为 ...

  7. django-CRM-项目部署

    流程 rbac组件的应用 1:拷贝rbac组件到新的项目中,执行注册 2:数据库迁移 先删除rbac下migrations下除了init之外的所有文件 修改用户表 class User(models. ...

  8. jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法

    2017年5月9日19:25:02 在做在线签名的时候,到了图片上传的时候,使用jquery异步ajax上传base64的图片数据的时候,使用默认的方式进行数据传输偶尔会出现 生产的图片只有上半部分, ...

  9. Ps去除背景

    http://www.16xx8.com/photoshop/jiaocheng/26905.html

  10. maven依赖和传递

    compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的范围就是编译范围.编译范围依赖在所有的classpath 中可用,同时它们也会被打包. 只有compile 才 ...