原文链接: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. 易混HTML Entities与正确用法

    在页面上,表示HTML实体有多种方式,比方有"&+name;"."&#+10进制ID"."&#x+16进制ID".而 ...

  2. 安装 RabbitMQ

    Ubuntu 16.04 安装 RabbitMQ #1 更新 $ sudo apt-get update $ sudo apt-get upgrade #2 安装Erlang $ cd /tmp $ ...

  3. mysql按位的索引判断位的值

    DELIMITER $$ DROP FUNCTION IF EXISTS `value_of_bit_index`$$/*计算数字的某个位的值*/CREATE FUNCTION `value_of_b ...

  4. vue filter方法-时间格式化

    plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...

  5. 删除或修改本地Git保存的账号密码

    win10 系统下进入 控制面板 > 用户帐户 > 管理你的凭据 选择 [Windows 凭据] git 保存的用户信息在普通凭据列表里 >>编辑>>>完成

  6. 山东省第八届ACM大学生程序设计竞赛

    C 暂时还不对 #include <iostream> #include <cstdio> #include <cmath> using namespace std ...

  7. Mac OSX取消Apache(httpd)开机启动(转载)

    启动服务时提示Apache启动失败,80端口被占用.查看进程发现存在几个httpd. OS X自带Apache,可是默认是没有启动的.我也没有开启Web共享,怎么就开机启动了呢? 不知道是不是因为安装 ...

  8. CF1B Spreadsheets

    题意翻译 人们常用的电子表格软件(比如: Excel)采用如下所述的坐标系统: 第一列被标为A,第二列为B,以此类推,第26列为Z.接下来为由两个字母构成的列号: 第27列为AA,第28列为AB... ...

  9. oracle索引分类

    参考文档:https://wenku.baidu.com/view/d4d6ee1ba76e58fafab00336.html https://blog.csdn.net/u010719917/art ...

  10. 实际体验Span<T> 的惊人表现

    前言 最近做了一个过滤代码块功能的接口.就是获取一些博客文章做文本处理,然后这些博客文章的代码块太多了,很多重复的代码关键词如果被拿过来处理,那么会对文本的特征表示已经特征选择会有很大的影响.所以需要 ...