axios

axios介绍

axios 是一个基于Promise的HTTP库,可以在浏览器和NodeJS中使用

特征

  1. 在客户端创建XMLHTTPRequest
  2. 在服务器创建HTTP
  3. 能拦截请求和响应
  4. 处理请求和响应数据
  5. 取消请求
  6. 自动转化成JSON数据
  7. 客户端支持防御XSRF

浏览器支持

  1. IE9及以上

使用axios示例

get

// get  请求的两种方式
axios.get('/users?id=123')
  .then(function (response) {
      // 响应成功
  })
  .catch(function (err) {
      // 响应失败
  })

axios.get('/users',{
    params: {
        id: 1234
    }
})
  .then()
  .catch()

post

axios.post('/users',{
    firstName: 'y',
    lastName: 'f'
})
  .then()
  .catch()

concurrent requests

function getUsersName () {
    return axios.get('/users/name')
}
function getUsersCount() {
    return axios.get('/users/count')
}
axios.all([getUsersName(),getUsersCount()])
  .then(axios.spread(function (nameRes, countRes) {

  }))

axios API

axios 通过配置发送请求

// post请求设置
axios({
    method: 'post',
    url: '/user/1234',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
// 默认是get请求
axios('/users/1234')

http 各种请求方式

方法 描述
get 请求制定的页面信息,并返回实体主体
delete 请求服务器删除制定页面
head 类似get请求,但没有实体主体,只有报头
options 允许客户端查看服务器的性能
post 向制定资源提交数据进行处理请求
put 从客户端向服务器传送的数据取代制定的文档内容
patch 实体中包含一个表,表中说明与该URL所表示的原内容的区别

axios 请求方法

  1. axios.request(config)
  2. axios.get(url,[config]),get请求方式没有第二个参数data,它的请求数据是以params的形式发送
  3. axios.delete(url,[config])
  4. axios.head(url,[config])
  5. axios.options(url,[config])
  6. axios.post(url,[data],[config])
  7. axios.put(url,[data],[config])
  8. axios.patch(url,[data],[config])

小知识点

  1. url,method,data不需要特别配置

创建实例

实例可以使用的方法和axios可以使用的方法相同

var instance = axios.create({
    // 进行配置
});

config

以下是可以进行配置的选项

{
    url: '/user',
    method: 'get',
    baseURL: 'https://some-domain.com/api/',
    // 在发送请求之前对请求做一些处理,对应的是一个函数数组
    transformRequest: [function (data) {
        // 可以对data做一些处理
        return data;
    }],
     // 允许我们在数据传送到`then`/`catch`之前对数据进行改动
    transformResponse: [ function (data) {
        // 可以对data做一些处理
        return data;
    }],
    // 需要被发送的自定义请求头信息
    headers: {'X-Requested-With':'XMLHttpRequest'},
    // 请求参数
    params: {
        id: 123
    },
    paramsSerializer: function (params) {
        // 让参数序列化
        return Qs.stringigy(params,{arrayFormat:'brackets'})
    },
    // 只适用于 post  put  patch
    data: {
        first: 'yf'
    },
    // 请求超过延迟事件,请求就会停止
    timeout: 1000,
    // 是否是跨域请求
    withCredentials: false, 
    // 允许自定义处理请求
    adapter: function (config) {

    },
    // http基础的认证应该被使用,并提供证书,会设置 `Authorization`头信息
    auth: {
        username: 'zhangsan',
        password: '123'
    },
    // 返回的数据类型
    responseType: 'json',
    // 默认
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    // 上传进度事件
    onUploadProgress: function (progressEvent) {
        
    },
    // 下载进度事件
    onDownloadProgress: function (progressEvent) {

    },
    // 响应内容的最大值
    maxContentLength: 2000,
    // 定义了是否根据 http 相应的状态码。来resolve 或者 reject promise
    validateStatus: function (status) {
        return status > 200 && status < 300;
    },
    // 允许重定向的最大数
    maxRedirects: 5,
    // 自定义代理,http / https 代理
    httpAgent: new http.Agent({keeyAlive:true}),
    httpsAgent: new https.Agent({keeyAlive:true}),
    // 代理认证,并提供证书
    proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
            username: 'sk',
            password: 'work hard'
        }
    },
    // 定义了一个用于取消请求的 cancel token
    cancelToken: new CancelToken(function (cancel) {});
}

response data

{
    data: {},
    statue: 200,
    statueText: 'OK',
    headers: {},
    config: {}
}

默认配置

全局默认配置

对所有请求都有效

axios.defaults.baseURL = 'http:/api'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

自定义的实例默认配置

var instance = axios.create({
    baseURL: 'https://api.example.com'
});

配置中的优先级

一个实例中的配置的优先级

  1. 请求中的config参数配置,等级最高
  2. 实例中的默认配置,等级次之
  3. lib/defauts.js配置最低
// 创建一个实例的配置
var instance  = axios.create({
    // 实例默认配置
    baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.timeout = 2500;

// 请求中的配置
instance.get('/users',{
    timeout: 3000
});

拦截器

在到达then/catch之前拦截

// 对请求添加拦截器
axios.interceptor.request.use(function (config) {
    // 请求前做些什么
    return config
},function (err) {
    // 对象请求错误做些什么
    return Promise.reject(err)
});
// 对响应添加响应器
axios.interceptor.response.use(function (res) {
    // 对相应数据做些什么
    return res;
},function (err) {
    // 对象请求错误做些什么
    return Promise.reject(err);
};

移除拦截器

var myInterceptor = axios.interceptor.request.use(function () {});
axios.interceptors.request.eject(myInterceptor);

给自定义的axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function(){})

错误处理

axios.get('/users')
  .then()
  .catch(function (err) {
      if (err.response) {
          // 请求已将发出,但是服务器的响应码不在2XX范围内
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      }else if (err.request) {
          // 有请求,但是没有响应
          // err.request 是 xhr 或者 clientRequest
      }else {
          // 请求发送错误
          console.log('Error',error.message)
      }
      // 无论那种错误,都打印出config信息
      console.log(error.config);
  })

取消

通过两种方式来取消请求

// 第一种方式
var cancelToken = axios.CancelToken;
var cancel;
axios.get('/user/1234',{
    cancelToken: new CancelToken(function (c) {
        cancel = c;
    });
})
// 取消请求
cancel();

// 第二种方式
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error 
  }
});
source.cancel('Operation canceled by the user.');

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,751评论 18 138
  • 时间2017-03-31 13:43:44Hope’s Blog 原文https://blog.ygxdxx.co...
    萧玄辞阅读 14,195评论 3 16
  • 随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,ax...
    领家的小猫阅读 13,722评论 3 106
  • 一、安装 1、 利用npm安装npm install axios --save 2、 利用bower安装bower...
    kiddings阅读 1,532评论 0 3
  • 永随清风明月意,恋那长天比翼飞,阳光雨露滋润性,江河海洋常流心。(豪情天地)
    万里千年阅读 139评论 1 3
  • 夏去冬来紧接着就是一年过去了,过完了春节后,又是一个新学期的开始。学校里的老师一天到晚的高考高考的叫嚣着,搞的依依...
    依水笑语阅读 279评论 0 0
  • 两年多的时间悄悄流逝,换工作成功,流浪在大城市的角落。 一个人安慰一个人,一个人压路一个人,一个人喂食一个人。 喜...
    爱普阅读 366评论 0 0
  • 其实很简单,人在进化到今天的过程中,越来越舒服了,如果,让你天天出去打猎才能喂饱肚子,你还有什么好抱怨的呢? 我想...
    写字人已失踪阅读 84评论 0 0