使用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框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下 ...
随机推荐
- 易混HTML Entities与正确用法
在页面上,表示HTML实体有多种方式,比方有"&+name;"."&#+10进制ID"."&#x+16进制ID".而 ...
- 安装 RabbitMQ
Ubuntu 16.04 安装 RabbitMQ #1 更新 $ sudo apt-get update $ sudo apt-get upgrade #2 安装Erlang $ cd /tmp $ ...
- mysql按位的索引判断位的值
DELIMITER $$ DROP FUNCTION IF EXISTS `value_of_bit_index`$$/*计算数字的某个位的值*/CREATE FUNCTION `value_of_b ...
- vue filter方法-时间格式化
plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...
- 删除或修改本地Git保存的账号密码
win10 系统下进入 控制面板 > 用户帐户 > 管理你的凭据 选择 [Windows 凭据] git 保存的用户信息在普通凭据列表里 >>编辑>>>完成
- 山东省第八届ACM大学生程序设计竞赛
C 暂时还不对 #include <iostream> #include <cstdio> #include <cmath> using namespace std ...
- Mac OSX取消Apache(httpd)开机启动(转载)
启动服务时提示Apache启动失败,80端口被占用.查看进程发现存在几个httpd. OS X自带Apache,可是默认是没有启动的.我也没有开启Web共享,怎么就开机启动了呢? 不知道是不是因为安装 ...
- CF1B Spreadsheets
题意翻译 人们常用的电子表格软件(比如: Excel)采用如下所述的坐标系统: 第一列被标为A,第二列为B,以此类推,第26列为Z.接下来为由两个字母构成的列号: 第27列为AA,第28列为AB... ...
- oracle索引分类
参考文档:https://wenku.baidu.com/view/d4d6ee1ba76e58fafab00336.html https://blog.csdn.net/u010719917/art ...
- 实际体验Span<T> 的惊人表现
前言 最近做了一个过滤代码块功能的接口.就是获取一些博客文章做文本处理,然后这些博客文章的代码块太多了,很多重复的代码关键词如果被拿过来处理,那么会对文本的特征表示已经特征选择会有很大的影响.所以需要 ...