使用axios优雅的发起网络请求
原文链接: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优雅的发起网络请求的更多相关文章
- android4.0 HttpClient 以后不能在主线程发起网络请求
android4.0以后不能在主线程发起网络请求,该异步网络请求. new Thread(new Runnable() { @Override public void run() { // TODO ...
- iOS swift HandyJSON组合Alamofire发起网络请求并转换成模型
在swift开发中,发起网络请求大部分开发者应该都是使用Alamofire发起的网络请求,至于请求完成后JSON解析这一块有很多解决方案,我们今天这里使用HandyJSON来解析请求返回的数据并转化成 ...
- 木马——本质就是cs socket远程控制,反弹木马是作为c端向外发起网络请求
摘自:http://kczxsp.hnu.edu.cn/upload/20150504165623705.pdf 里面对于木马的实验过程写得非常清楚,值得一看. 木马是隐藏在正常程序中的具有特殊功 ...
- vue 如何发起网络请求 之 axios
1 1 2 3 4 5 6 7 8 9 10 // axios 请求 在main.js里边写入 import Axios from 'axios' // 配置请求信息 var $http = ...
- thinkphp发起网络请求
常规做法使用CURL方法: private function http_request($url,$data = null,$headers=array()){ $curl = curl_init() ...
- uniapp 发起网络请求
推荐下我写的uni-http 创建http-config.js import Vue from 'vue' const BASE_URL = 'http://xxx.com'; if (process ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
- 造轮子 | 怎样设计一个面向协议的 iOS 网络请求库
近期开源了一个面向协议设计的网络请求库 MBNetwork,基于 Alamofire 和 ObjectMapper 实现,目的是简化业务层的网络请求操作. 须要干些啥 对于大部分 App 而言,业务层 ...
- Jest中Mock网络请求
Jest中Mock网络请求 最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能会一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下 ...
随机推荐
- PHP正则验证类
项目中经常使用到的验证,很使用的.查看与下载<?php /** * 验证类 * * @lastmodify 2015-12-19 * @author wuheng */ class Verify ...
- [pig] pig 基础使用
1.pig运行模式 本地模式: pig -x local 直接访问本地磁盘 集群模式: pig 或者 pig -x mapreduce 2.pig latin 交互 帮助信息 help 上传本地文件 ...
- 如何用AJax提交name[]数组?
https://www.cnblogs.com/junzilan/p/5424120.html
- 启动Mysql数据库报错误:-bash: ./start.sh: Permission denied
linux下安装好Mysql数据库后,输入启动命令: cd /home/homework/mysql && ./start.sh 回车后报如下错误: 原因是:该文件未有相关执行权限 解 ...
- 算法提高 最小方差生成树(Kruskal)_模板
算法提高 最小方差生成树 时间限制:1.0s 内存限制:256.0MB 问题描述 给定带权无向图,求出一颗方差最小的生成树. 输入格式 输入多组测试数据.第一行为N,M,依次是 ...
- 【C++ 模板迭代器实例/半素数】
题目:判断一个数是不是两个素数的乘积,是输出YES,不是输出NO.数据范围为2-1000000. 为了解决这个问题,我们继续使用STL——vector & set,分别用来存储素数和半素数.为 ...
- django-CRM-项目部署
流程 rbac组件的应用 1:拷贝rbac组件到新的项目中,执行注册 2:数据库迁移 先删除rbac下migrations下除了init之外的所有文件 修改用户表 class User(models. ...
- jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法
2017年5月9日19:25:02 在做在线签名的时候,到了图片上传的时候,使用jquery异步ajax上传base64的图片数据的时候,使用默认的方式进行数据传输偶尔会出现 生产的图片只有上半部分, ...
- Ps去除背景
http://www.16xx8.com/photoshop/jiaocheng/26905.html
- maven依赖和传递
compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的范围就是编译范围.编译范围依赖在所有的classpath 中可用,同时它们也会被打包. 只有compile 才 ...