axios整合使用全攻略,全攻略之

By admin in 4858美高梅 on 2019年3月27日
  1. 安装axios

    $ npm install axios

惯例先安装axios,不多说!

您能够在 Request 中央银行使具体的配备项

乘机 vuejs 小编尤雨溪发布信息,不再继续保证vue-resource,并援引大家利用
axios 起始,axios
被更加多的人所领会。本来想在网上找找详细攻略,突然意识,axios
的官方文书档案本人就老大详细!!有其一还要哪些自行车!!所以推举大家学习这种库,最佳详细阅读其法定文书档案。大致翻译了一下
axios 的官方文书档案,相信我们固然吃透本文再加以实施,axios 正是小难点啦!!

2.在main.js里面导入axios

cnpm install axios

发送三个 POST 请求

只要你认为本文对你有帮带,无妨点个赞或关怀收藏一下,您的鼓励对自小编卓殊首要。

import axios from 'axios'

Vue.prototype.$http = axios

1.axios配置

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios 简介

axios 是七个基于Promise 用于浏览器和 nodejs 的 HTTP
客户端,它本人持有以下特点:


  • 从浏览器中创设 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 截留请求和响应
  • 转移请求和响应数据
  • 注销请求
  • 电动转换JSON数据
  • 客户端支持防止
    CSRF/XSRF

3.上边就能够利用axios获取数据了

 小编的目录结构src/axios/index.js,axios配置都在该公文下

伸手一张远程图片

浏览器包容性

// 发送get请求

// 向具有指定ID的用户发出请求
this.$http.get('/user?ID=12345')
  .then(response => {
    console.log(response);
  })
// 错误处理
  .catch(error => {
    console.log(error);
  });
// 也可以通过 params 对象传递参数
$http.get('/user', {
    params: {
      ID: 12345
    }
  })
   .then(response => {
    console.log(response);
  })
// 错误处理
  .catch(error => {
    console.log(error);
  });

// 发送post请求
this.$http.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

src/axios/index.js 如下:

axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

引入格局:

$ npm install axios
$ cnpm install axios //taobao源
$ bower install axios
或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

import axios from 'axios'
import qs from 'qs'
// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://localhost:8008';

在 axios 中使用 axios(url[, config]) 情势来陈设选项

举个栗子:


拦截器,axios.interceptors.request.use发送请求前处理

诸如3个默许的 GET 请求

执行 GET 请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.interceptors.response.use接受再次回到后,回调此前处理处理

axios('/user/12345');

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//POST传参序列化
axios.interceptors.request.use((config) => {
 if(config.method === 'post'){
  config.data = qs.stringify(config.data);
 }
 return config;
},(error) =>{
 return Promise.reject(error);
});
//返回状态判断
axios.interceptors.response.use((res) =>{
 if(!res.data.success){
  return Promise.reject(res);
 }
 return res;
}, (error) => {
 //404等问题可以在这里处理
 return Promise.reject(error);
});

呼吁方法简写

axios 提供了一名目繁多简洁的法门来支撑具备的呼吁

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

你能够运用如下的两个方式来出现的举办异步请求,当最后1个呼吁之后才运营前面包车型地铁代码

axios.all(iterable)

axios.spread(callback)

那里举例表达

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

施行多少个冒出请求

function getUserAccount() {
return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}));

公物艺术:

开创1个实例

axios整合使用全攻略,全攻略之。您可见透过自定义的布局成立一个 axios 实例

axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

axios API


能够透过将相关配置传递给 axios 来进展呼吁。

export function fetch(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
   .catch((error) => {
    reject(error)
   })
 })
}

实例

可以行使的实例如下所示,内定的配置会和实例配置合并

axios#request(config)

axios#get(url[, config])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

axios(config)

// 发送一个 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

事情方法:

axios(url[, config])

// 发送一个 GET 请求 (GET请求是默认请求模式)
axios('/user/12345');
export default {
 getAddressJson() {
  return fetch('/address/',{addressId:1})
 }
}

恳请方法外号

为了有利于起见,已经为富有支持的请求方法提供了小名。

  • axios.request(config)
  • axios.get(url [,config])
  • axios.delete(url [,config])
  • axios.head(url [,config])
  • axios.post(url [,data [,config]])
  • axios.put(url [,data [,config]])
  • axios.patch(url [,data [,config]])

** 注意
**当使用外号方法时,不要求在config中钦赐url,method和data属性。

假若不晓得能够将上述代码依次copy到src/axios/index.js文件,当然axios.defaults.baseU中华VL
= ”; 必要换来团结的api。

并发

支援函数处理并发请求。

  • axios.all(iterable)
  • axios.spread(callback)

2大局注册axios

创办实例

您能够行使自定义配置成立axios的新实例。

为了利用axios,在相继零部件中引入就足以应用:

axios.create([config])
ar instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

实例方法
可用的实例方法如下所示。 钦定的配置将与实例配置合并。

  • axios#request(config)
  • axios#get(url [,config])
  • axios#delete(url [,config])
  • axios#head(url [,config])
  • axios#post(url [,data [,config]])
  • axios#put(url [,data [,config]])
  • axios#patch(url [,data [,config]])
import axios from './axios'

伸手配置


那些是用以发出请求的可用配置选项。 唯有url是必不可少的。
倘诺未钦定方法,请求将暗许为GET。

{
  // `url`是将用于请求的服务器URL
  url: '/user',
  // `method`是发出请求时使用的请求方法
  method: 'get', // 默认
  // `baseURL`将被添加到`url`前面,除非`url`是绝对的。
  // 可以方便地为 axios 的实例设置`baseURL`,以便将相对 URL 传递给该实例的方法。
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest`允许在请求数据发送到服务器之前对其进行更改
  // 这只适用于请求方法'PUT','POST'和'PATCH'
  // 数组中的最后一个函数必须返回一个字符串,一个 ArrayBuffer或一个 Stream
  transformRequest: [function (data) {
    // 做任何你想要的数据转换
    return data;
  }],
  // `transformResponse`允许在 then / catch之前对响应数据进行更改
  transformResponse: [function (data) {
    // Do whatever you want to transform the data
    return data;
  }],
  // `headers`是要发送的自定义 headers
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params`是要与请求一起发送的URL参数
  // 必须是纯对象或URLSearchParams对象
  params: {
    ID: 12345
  },
  // `paramsSerializer`是一个可选的函数,负责序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data`是要作为请求主体发送的数据
  // 仅适用于请求方法“PUT”,“POST”和“PATCH”
  // 当没有设置`transformRequest`时,必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout`指定请求超时之前的毫秒数。
  // 如果请求的时间超过'timeout',请求将被中止。
  timeout: 1000,
  // `withCredentials`指示是否跨站点访问控制请求
  // should be made using credentials
  withCredentials: false, // default
  // `adapter'允许自定义处理请求,这使得测试更容易。
  // 返回一个promise并提供一个有效的响应(参见[response docs](#response-api))
  adapter: function (config) {
    /* ... */
  },
  // `auth'表示应该使用 HTTP 基本认证,并提供凭据。
  // 这将设置一个`Authorization'头,覆盖任何现有的`Authorization'自定义头,使用`headers`设置。
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  // “responseType”表示服务器将响应的数据类型
  // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  // `onUploadProgress`允许处理上传的进度事件
  onUploadProgress: function (progressEvent) {
    // 使用本地 progress 事件做任何你想要做的
  },
  // `onDownloadProgress`允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // `maxContentLength`定义允许的http响应内容的最大大小
  maxContentLength: 2000,
  // `validateStatus`定义是否解析或拒绝给定的promise
  // HTTP响应状态码。如果`validateStatus`返回`true`(或被设置为`null` promise将被解析;否则,promise将被
  // 拒绝。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
  // `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
  // 如果设置为0,则不会遵循重定向。
  maxRedirects: 5, // 默认
  // `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
  // 允许配置类似`keepAlive`的选项,
  // 默认情况下不启用。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy'定义代理服务器的主机名和端口
  // `auth`表示HTTP Basic auth应该用于连接到代理,并提供credentials。
  // 这将设置一个`Proxy-Authorization` header,覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // “cancelToken”指定可用于取消请求的取消令牌
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
}

动用 then 时,您将吸收如下响应:

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

但是使用那种措施大家要求在每2个组件中去引入,有些麻烦,上边大家介绍一种全局注册的措施。

配置暗许值


你能够钦定将动用于每个请求的安排暗许值。

在main.js中:

全局axios默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
import axios from './axios'
Vue.prototype.$axios = axios
自定义实例私下认可值
//在创建实例时设置配置默认值
var instance = axios.create({
   baseURL:'https://api.example.com'
});

//在实例创建后改变默认值
instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

添加那两行代码,将 axios 改写为 Vue
的原型属性,那样在每一种零部件中都能够使用axios,具体方法如下:

陈设优先级依次

布署将与事先顺序合并。 顺序是lib /
defaults.js中的库暗中同意值,然后是实例的defaults属性,最后是呼吁的config参数。
后者将先期于前者。 那里有三个例证。

//使用库提供的配置默认值创建实例
//此时,超时配置值为`0`,这是库的默认值
var instance = axios.create();

//覆盖库的超时默认值
//现在所有请求将在超时前等待2.5秒
instance.defaults.timeout = 2500;

//覆盖此请求的超时,因为它知道需要很长时间
instance.get('/ longRequest',{
   timeout:5000
});
 submitForm () {    
   this.$axios.getAddressJson().then(function (res) {
  //成功之后处理逻辑
    console.log(res)
   },function (res) {
    //失败之后处理逻辑
    console.log("error:"+res)
   })
  }

拦截器

您能够截取请求或响应在被 then 也许 catch 处理以前

//添加请求拦截器
axios.interceptors.request.use(function(config){
     //在发送请求之前做某事
     return config;
   },function(error){
     //请求错误时做些事
     return Promise.reject(error);
   });

//添加响应拦截器
axios.interceptors.response.use(function(response){
     //对响应数据做些事
     return response;
   },function(error){
     //请求错误时做些事
     return Promise.reject(error);
   });

假设你以往或许须要删除拦截器。

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

你能够将拦截器添加到axios的自定义实例。

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

总结

处理错误


axios.get('/ user / 12345')
   .catch(function(error){
     if(error.response){
       //请求已发出,但服务器使用状态代码进行响应
       //落在2xx的范围之外
       console.log(error.response.data);
       console.log(error.response.status);
       console.log(error.response.headers);
     } else {
       //在设置触发错误的请求时发生了错误
       console.log('Error',error.message);
     }}
     console.log(error.config);
   });

你可以运用validateStatus配置选项定义自定义HTTP状态码错误范围。

axios.get('/ user / 12345',{
   validateStatus:function(status){
     return status < 500; //仅当状态代码大于或等于500时拒绝
   }}
})

如上所述是作者给大家介绍的vue
axios整合利用全攻略,希望对大家享有帮忙,假使大家有任何疑问请给本人留言,小编会及时复苏我们的。在此也万分感激大家对台本之家网站的支撑!

消除


你能够使用撤销令牌撤废请求。

axios cancel token API基于可收回的promise提出,近日处在阶段1。

你能够动用CancelToken.source工厂创立三个注销令牌,如下所示:

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 {
// 处理错误
}
});

//取消请求(消息参数是可选的)
source.cancel('操作被用户取消。');

您还足以经过将实施器函数字传送递给CancelToken构造函数来成立打消令牌:

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/ user / 12345',{
   cancelToken:new CancelToken(function executor(c){
     //一个执行器函数接收一个取消函数作为参数
     cancel = c;
   })
});

// 取消请求
clear();

瞩目:您能够行使相同的撤除令牌撤除多少个请求。

你只怕感兴趣的小说:

  • vue 达成axios拦截、页面跳转和token
    验证
  • vue框架搭建之axios使用教程
  • vue结合axios与后端进行ajax交互的艺术
  • vue中axios的卷入难点(简易版拦截,get,post)
  • vue+axios新手实践完毕登陆的演示代码
  • 详解vue-cli 创设项目 vue-cli请求后台接口
    vue-cli使用axios、sass、swiper
  • vue2.0读书之axios的卷入与vuex介绍
  • Vue1遍封装axios为插件使用详解
  • 详解vue中axios的封装

4858美高梅,使用application / x-www-form-urlencoded格式

暗中认可境况下,axios将JavaScript对象连串化为JSON。 要以应用程序/
x-www-form-urlencoded格式发送数据,您能够选择以下选项之一。

浏览器

在浏览器中,您能够利用UOdysseyLSearchParams API,如下所示:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

请留心,全数浏览器都不扶助U奥迪Q5LSearchParams,然则有四个polyfill可用(确定保障polyfill全局环境)。

抑或,您能够应用qs库对数码进行编码:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Node.js

在node.js中,能够运用querystring模块,如下所示:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

你也足以选取qs库。

Promise


axios 注重本机要补助ES6 Promise实现。 借使你的环境不帮忙ES6
Promises,您能够运用polyfill。

TypeScript

axios包括TypeScript定义。

import axios from 'axios';
axios.get('/user?ID=12345');

axios在非常大程度上遭到Angular提供的$http服务的启示。
最后,axios努力提供2个在Angular外使用的独门的$http-like服务。

初稿地址:
https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有