使用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框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下 ...
随机推荐
- centos7下使用docker安装nginx
需要环境docker,此处不做介绍. 1. docker拉取官方nginx镜像 docker pull nginx 2. 等待下载完成后,我们就可以在本地镜像列表里查到 REPOSITORY 为 ng ...
- 自己动手为Spark 2.x添加ALTER TABLE ADD COLUMNS语法支持
SparkSQL从2.0开始已经不再支持ALTER TABLE table_name ADD COLUMNS (col_name data_type [COMMENT col_comment], .. ...
- 解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)错误
我调这个bug调了一天多,在网上搜索的检查namespace,package等,都没有错.错误提示是没有找到xml文件,我就纳闷了,为什么找不到呢?后来才发现,原来是resource中奇怪的目录为题, ...
- 接口配置信息修改 请填写接口配置信息,此信息需要你有自己的服务器资源,填写的URL需要正确响应微信发送的Token验证
// 1)将token.timestamp.nonce三个参数进行字典序排序 // 2)将三个参数字符串拼接成一个字符串进行sha1加密 // 3)开发者获得加密后的字符串可与signature对比, ...
- php操作redis案例
<?php //实例化 $redis = new Redis(); //连接服务器 //默认端口是6379,可不写 $redis->connect( ...
- python全栈开发 * 进程之间的通信,进程之间数据共享 * 180726
进程之间的通信(IPC)队列和管道一.队列 基于管道实现 管道 + 锁 数据安全(一).队列 队列遵循先进先出原则(FIFO) 多用于维护秩序,买票,秒杀 队列的所有方法: put()(给队列里添加数 ...
- css学习_css文字阴影、盒子阴影
文字阴影和盒子阴影的用法: 多阴影
- Git忽略提交规则 - .gitignore配置运维总结
在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交.简单来说一个场景:在你使用git add .的时候,遇到 ...
- windos上安装jenkins部署springboot的jar包(未运行,只是在打包并上传linux成功了)
流程: 从linux上的svn拉取代码,到本地(windos)jenkins的工作区间的workspace,然后通过构建,打包,部署到linux上 环境: windos上安装:maven jdk je ...
- MAC OSX 开启/禁用SafeSleep功能
如果想要禁用,我们需要在终端中输入下面的命令: 然后定位到/private/var/vm/删除已经存在的sleepimage文件 cd /private/var/vm/ 使用下面的命令删除该文件 su ...