当前位置:首页 > 前端技术 > vue-resource和axios区别

vue-resource和axios区别

2022年08月05日 14:45:44前端技术4

vue-resource

Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。

vue-resource特点

vue-resource插件具有以下特点:

  1. 体积小
    vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。
  2. 支持主流的浏览器
    和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。
  3. 支持Promise API和URI Templates
    Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
    URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。
  4. 支持拦截器
    拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。
    拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

vue-resource使用

1、引入vue-resource

  1.  
    <script src="js/vue.js"></script>
  2.  
    <script src="js/vue-resource.js"></script>

2、引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。

  1.  
    // 基于全局Vue对象使用http
  2.  
    Vue.http. get('/someUrl', [options]).then(successCallback, errorCallback);
  3.  
    Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
  4.  
     
  5.  
    // 在一个Vue实例内使用$http
  6.  
    this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
  7.  
    this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。
then方法的回调函数也有两种写法,第一种是传统的函数写法,第二种是更为简洁的ES 6的Lambda写法:

  1.  
    // 传统写法
  2.  
    this.$http.get( '/someUrl', [options]).then(function(response){
  3.  
    // 响应成功回调
  4.  
    }, function(response){
  5.  
    // 响应错误回调
  6.  
    });
  7.  
    // Lambda写法
  8.  
    this.$http.get( '/someUrl', [options]).then((response) => {
  9.  
    // 响应成功回调
  10.  
    }, (response) => {
  11.  
    // 响应错误回调
  12.  
    });

支持的HTTP方法

vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:

  1.  
    get(url, [options])
  2.  
    head(url, [options])
  3.  
    delete(url, [options])
  4.  
    jsonp(url, [options])
  5.  
    post(url, [body], [options])
  6.  
    put(url, [body], [options])
  7.  
    patch(url, [body], [options])

除了jsonp以外,另外6种的API名称是标准的HTTP方法。当服务端使用REST API时,客户端的编码风格和服务端的编码风格近乎一致,这可以减少前端和后端开发人员的沟通成本。

客户端请求方法 服务端处理方法
this.$http.get(...) Getxxx
this.$http.post(...) Postxxx
this.$http.put(...) Putxxx
this.$http.delete(...) Deletexxx

options对象

参数 类型 描述
url string 请求的URL
method string 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
body Object, FormData string request body
params Object 请求的URL参数对象
headers Object request header
timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credentials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

emulateHTTP的作用

  1.  
    如果Web服务器无法处理PUT, PATCH和 DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。
  2.  
    Vue.http.options.emulateHTTP = true;

emulateJSON的作用

  1.  
    如果Web服务器无法处理编码为application/json的请求,你可以启用 emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样。
  2.  
    Vue.http.options.emulateJSON = true;

response对象

response对象包含以下属性:

方法 类型 描述
text() string 以string形式返回response body
json() Object 以JSON对象形式返回response body
blob() Blob 以二进制形式返回response body
属性 类型 描述
ok boolean 响应的HTTP状态码在200~299之间时,该属性为true
status number 响应的HTTP状态码
statusText string 响应的状态文本
headers Object 响应头

CURD实例

1、GET请求

  1.  
    var demo = new Vue({
  2.  
    el: '#app',
  3.  
    data: {
  4.  
    gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
  5.  
    gridData: [],
  6.  
    apiUrl: 'http://211.149.193.19:8080/api/customers'
  7.  
    },
  8.  
    ready: function() {
  9.  
    this.getCustomers()
  10.  
    },
  11.  
    methods: {
  12.  
    getCustomers: function() {
  13.  
    this.$http.get(this.apiUrl)
  14.  
    .then((response) => {
  15.  
    this.$set('gridData', response.data)
  16.  
    })
  17.  
    .catch(function(response) {
  18.  
    console.log(response)
  19.  
    })
  20.  
    }
  21.  
    }
  22.  
    })

这段程序的then方法只提供了successCallback,而省略了errorCallback。
catch方法用于捕捉程序的异常,catch方法和errorCallback是不同的,errorCallback只在响应失败时调用,而catch则是在整个请求到响应过程中,只要程序出错了就会被调用。
在then方法的回调函数内,你也可以直接使用this,this仍然是指向Vue实例的:

  1.  
    getCustomers: function() {
  2.  
    this.$http.get(this.apiUrl)
  3.  
    .then((response) => {
  4.  
    this.$set('gridData', response.data)
  5.  
    })
  6.  
    .catch(function(response) {
  7.  
    console.log(response)
  8.  
    })
  9.  
    }

2、JSONP请求

  1.  
    getCustomers: function() {
  2.  
    this.$http.jsonp(this.apiUrl).then(function(response){
  3.  
    this.$set('gridData', response.data)
  4.  
    })
  5.  
    }

3、POST请求

  1.  
    var demo = new Vue({
  2.  
    el: '#app',
  3.  
    data: {
  4.  
    show: false,
  5.  
    gridColumns: [{
  6.  
    name: 'customerId',
  7.  
    isKey: true
  8.  
    }, {
  9.  
    name: 'companyName'
  10.  
    }, {
  11.  
    name: 'contactName'
  12.  
    }, {
  13.  
    name: 'phone'
  14.  
    }],
  15.  
    gridData: [],
  16.  
    apiUrl: 'http://211.149.193.19:8080/api/customers',
  17.  
    item: {}
  18.  
    },
  19.  
    ready: function() {
  20.  
    this.getCustomers()
  21.  
    },
  22.  
    methods: {
  23.  
    closeDialog: function() {
  24.  
    this.show = false
  25.  
    },
  26.  
    getCustomers: function() {
  27.  
    var vm = this
  28.  
    vm.$http.get(vm.apiUrl)
  29.  
    .then((response) => {
  30.  
    vm.$set('gridData', response.data)
  31.  
    })
  32.  
    },
  33.  
    createCustomer: function() {
  34.  
    var vm = this
  35.  
    vm.$http.post(vm.apiUrl, vm.item)
  36.  
    .then((response) => {
  37.  
    vm.$set('item', {})
  38.  
    vm.getCustomers()
  39.  
    })
  40.  
    this.show = false
  41.  
    }
  42.  
    }
  43.  
    })

4、PUT请求

  1.  
    updateCustomer: function() {
  2.  
    var vm = this
  3.  
    vm.$http.put( this.apiUrl + '/' + vm.item.customerId, vm.item)
  4.  
    .then((response) => {
  5.  
    vm.getCustomers()
  6.  
    })
  7.  
    }

5、Delete请求

  1.  
    deleteCustomer: function(customer){
  2.  
    var vm = this
  3.  
    vm.$http. delete(this.apiUrl + '/' + customer.customerId)
  4.  
    .then((response) => {
  5.  
    vm.getCustomers()
  6.  
    })
  7.  
    }

vue-resource是一个非常轻量的用于处理HTTP请求的插件,它提供了两种方式来处理HTTP请求:
1、使用Vue.http或this.$http
2、使用Vue.resource或this.$resource

  1.  
    data(){
  2.  
    return{
  3.  
    toplist:[],
  4.  
    alllist:[]
  5.  
    }
  6.  
    },
  7.  
    //vue-router
  8.  
    route:{
  9.  
    data({to}){
  10.  
    //并发请求,利用 Promise
  11.  
    return Promise.all([
  12.  
    //简写
  13.  
    this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1}),
  14.  
    //this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0})
  15.  
    //不简写
  16.  
    this.$http({
  17.  
    method:'GET',
  18.  
    url:'http://192.168.30.235:9999/rest/knowledge/list',
  19.  
    data:{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0},
  20.  
    headers: {"X-Requested-With": "XMLHttpRequest"},
  21.  
    emulateJSON: true
  22.  
    })
  23.  
    ]).then(function(data){//es5写法
  24.  
    return{
  25.  
    toplist:data[0].data.knowledgeList,
  26.  
    alllist:data[1].data.knowledgeList
  27.  
    }
  28.  
    //es6写法 .then()部分
  29.  
    //.then(([toplist,alllist])=>({toplist,alllist}))
  30.  
    },function(error){
  31.  
    //error
  32.  
    })
  33.  
    }
  34.  
    }

vue axios

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

  • 功能特性
    1、在浏览器中发送 XMLHttpRequests 请求
    2、在 node.js 中发送 http请求
    3、支持 Promise API
    4、拦截请求和响应
    5、转换请求和响应数据
    6、取消请求
    7、自动转换 JSON 数据
    8、客户端支持保护安全免受 CSRF/XSRF 攻击
  • 安装 axios
    $ npm install axios
  • 在要使用的文件中引入axios
    import axios from 'axios'
  • GET请求
  1.  
    // 向具有指定ID的用户发出请求
  2.  
    axios.get( '/user?ID=12345')
  3.  
    .then(function (response) {
  4.  
    console.log(response);
  5.  
    })
  6.  
    .catch(function (error) {
  7.  
    console.log(error);
  8.  
    });
  9.  
     
  10.  
    // 也可以通过 params 对象传递参数
  11.  
    axios.get('/user', {
  12.  
    params: {
  13.  
    ID: 12345
  14.  
    }
  15.  
    })
  16.  
    .then(function (response) {
  17.  
    console.log(response);
  18.  
    })
  19.  
    .catch(function (error) {
  20.  
    console.log(error);
  21.  
    });
  • POST请求
  1.  
    axios.post( '/user', {
  2.  
    firstName: 'Fred',
  3.  
    lastName: 'Flintstone'
  4.  
    })
  5.  
    .then(function (response) {
  6.  
    console.log(response);
  7.  
    })
  8.  
    .catch(function (error) {
  9.  
    console.log(error);
  10.  
    });
  • 执行多个并发请求
  1.  
    function getUserAccount() {
  2.  
    return axios.get('/user/12345');
  3.  
    }
  4.  
     
  5.  
    function getUserPermissions() {
  6.  
    return axios.get('/user/12345/permissions');
  7.  
    }
  8.  
     
  9.  
    axios.all([getUserAccount(), getUserPermissions()])
  10.  
    .then(axios.spread(function (acct, perms) {
  11.  
    //两个请求现已完成
  12.  
    }));
  • axios API:可以通过将相关配置传递给 axios 来进行请求。
  1.  
    axios(config)
  2.  
    // 发送一个 POST 请求
  3.  
    axios({
  4.  
    method: 'post',
  5.  
    url: '/user/12345',
  6.  
    data: {
  7.  
    firstName: 'Fred',
  8.  
    lastName: 'Flintstone'
  9.  
    }
  10.  
    });
  1.  
    axios(url[, config])
  2.  
    // 发送一个 GET 请求 (GET请求是默认请求模式)
  3.  
    axios( '/user/12345');

请求方法别名:

  1.  
    为了方便起见,已经为所有支持的请求方法提供了别名。
  2.  
    axios.request(config)
  3.  
    axios.get(url [,config])
  4.  
    axios.delete(url [,config])
  5.  
    axios.head(url [,config])
  6.  
    axios.post(url [,data [,config]])
  7.  
    axios.put(url [,data [,config]])
  8.  
    axios.patch(url [,data [,config]])
  9.  
    注意:当使用别名方法时,不需要在config中指定url,method和data属性。
  • 并发
    帮助函数处理并发请求。
    axios.all(iterable)
    axios.spread(callback)
  • 创建实例
    也可以使用自定义配置创建axios的新实例。
    axios.create([config])
  1.  
    var instance = axios.create({
  2.  
    baseURL: 'https://some-domain.com/api/',
  3.  
    timeout: 1000,
  4.  
    headers: {'X-Custom-Header': 'foobar'}
  5.  
    });
  • 实例方法
    可用的实例方法如下所示。 指定的配置将与实例配置合并。
  1.  
    axios#request(config)
  2.  
    axios#get(url [,config])
  3.  
    axios# delete(url [,config])
  4.  
    axios#head(url [,config])
  5.  
    axios#post(url [,data [,config]])
  6.  
    axios#put(url [,data [,config]])
  7.  
    axios#patch(url [,data [,config]])
  • 请求配置
    这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法,请求将默认为GET。
  1.  
    {
  2.  
    // `url`是将用于请求的服务器URL
  3.  
    url: '/user',
  4.  
     
  5.  
    // `method`是发出请求时使用的请求方法
  6.  
    method: 'get', // 默认
  7.  
     
  8.  
    // `baseURL`将被添加到`url`前面,除非`url`是绝对的。
  9.  
    // 可以方便地为 axios 的实例设置`baseURL`,以便将相对 URL 传递给该实例的方法。
  10.  
    baseURL: 'https://some-domain.com/api/',
  11.  
     
  12.  
    // `transformRequest`允许在请求数据发送到服务器之前对其进行更改
  13.  
    // 这只适用于请求方法'PUT','POST'和'PATCH'
  14.  
    // 数组中的最后一个函数必须返回一个字符串,一个 ArrayBuffer或一个 Stream
  15.  
     
  16.  
    transformRequest: [ function (data) {
  17.  
    // 做任何你想要的数据转换
  18.  
     
  19.  
    return data;
  20.  
    }],
  21.  
     
  22.  
    // `transformResponse`允许在 then / catch之前对响应数据进行更改
  23.  
    transformResponse: [function (data) {
  24.  
    // Do whatever you want to transform the data
  25.  
     
  26.  
    return data;
  27.  
    }],
  28.  
     
  29.  
    // `headers`是要发送的自定义 headers
  30.  
    headers: {'X-Requested-With': 'XMLHttpRequest'},
  31.  
     
  32.  
    // `params`是要与请求一起发送的URL参数
  33.  
    // 必须是纯对象或URLSearchParams对象
  34.  
    params: {
  35.  
    ID: 12345
  36.  
    },
  37.  
     
  38.  
    // `paramsSerializer`是一个可选的函数,负责序列化`params`
  39.  
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  40.  
    paramsSerializer: function(params) {
  41.  
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  42.  
    },
  43.  
     
  44.  
    // `data`是要作为请求主体发送的数据
  45.  
    // 仅适用于请求方法“PUT”,“POST”和“PATCH”
  46.  
    // 当没有设置`transformRequest`时,必须是以下类型之一:
  47.  
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  48.  
    // - Browser only: FormData, File, Blob
  49.  
    // - Node only: Stream
  50.  
    data: {
  51.  
    firstName: 'Fred'
  52.  
    },
  53.  
     
  54.  
    // `timeout`指定请求超时之前的毫秒数。
  55.  
    // 如果请求的时间超过'timeout',请求将被中止。
  56.  
    timeout: 1000,
  57.  
     
  58.  
    // `withCredentials`指示是否跨站点访问控制请求
  59.  
    // should be made using credentials
  60.  
    withCredentials: false, // default
  61.  
     
  62.  
    // `adapter'允许自定义处理请求,这使得测试更容易。
  63.  
    // 返回一个promise并提供一个有效的响应(参见[response docs](#response-api))
  64.  
    adapter: function (config) {
  65.  
    /* ... */
  66.  
    },
  67.  
     
  68.  
    // `auth'表示应该使用 HTTP 基本认证,并提供凭据。
  69.  
    // 这将设置一个`Authorization'头,覆盖任何现有的`Authorization'自定义头,使用`headers`设置。
  70.  
    auth: {
  71.  
    username: 'janedoe',
  72.  
    password: 's00pers3cret'
  73.  
    },
  74.  
     
  75.  
    // “responseType”表示服务器将响应的数据类型
  76.  
    // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  77.  
    responseType: 'json', // default
  78.  
     
  79.  
    //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
  80.  
    xsrfCookieName: 'XSRF-TOKEN', // default
  81.  
     
  82.  
    // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
  83.  
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
  84.  
     
  85.  
    // `onUploadProgress`允许处理上传的进度事件
  86.  
    onUploadProgress: function (progressEvent) {
  87.  
    // 使用本地 progress 事件做任何你想要做的
  88.  
    },
  89.  
     
  90.  
    // `onDownloadProgress`允许处理下载的进度事件
  91.  
    onDownloadProgress: function (progressEvent) {
  92.  
    // Do whatever you want with the native progress event
  93.  
    },
  94.  
     
  95.  
    // `maxContentLength`定义允许的http响应内容的最大大小
  96.  
    maxContentLength: 2000,
  97.  
     
  98.  
    // `validateStatus`定义是否解析或拒绝给定的promise
  99.  
    // HTTP响应状态码。如果`validateStatus`返回`true`(或被设置为`null` promise将被解析;否则,promise将被
  100.  
    // 拒绝。
  101.  
    validateStatus: function (status) {
  102.  
    return status >= 200 && status < 300; // default
  103.  
    },
  104.  
     
  105.  
    // `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
  106.  
    // 如果设置为0,则不会遵循重定向。
  107.  
    maxRedirects: 5, // 默认
  108.  
     
  109.  
    // `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
  110.  
    // 允许配置类似`keepAlive`的选项,
  111.  
    // 默认情况下不启用。
  112.  
    httpAgent: new http.Agent({ keepAlive: true }),
  113.  
    httpsAgent: new https.Agent({ keepAlive: true }),
  114.  
     
  115.  
    // 'proxy'定义代理服务器的主机名和端口
  116.  
    // `auth`表示HTTP Basic auth应该用于连接到代理,并提供credentials。
  117.  
    // 这将设置一个`Proxy-Authorization` header,覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
  118.  
    proxy: {
  119.  
    host: '127.0.0.1',
  120.  
    port: 9000,
  121.  
    auth: : {
  122.  
    username: 'mikeymike',
  123.  
    password: 'rapunz3l'
  124.  
    }
  125.  
    },
  126.  
     
  127.  
    // “cancelToken”指定可用于取消请求的取消令牌
  128.  
    // (see Cancellation section below for details)
  129.  
    cancelToken: new CancelToken(function (cancel) {
  130.  
    })
  131.  
    }

使用 then 时,将收到如下响应:

  1.  
    axios. get('/user/12345')
  2.  
    . then(function(response) {
  3.  
    console.log(response.data);
  4.  
    console.log(response.status);
  5.  
    console.log(response.statusText);
  6.  
    console.log(response.headers);
  7.  
    console.log(response.config);
  8.  
    });
  • 配置默认值

1、全局axios默认值

  1.  
    axios.defaults.baseURL = 'https://api.example.com';
  2.  
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  3.  
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2、自定义实例默认值

  1.  
    //在创建实例时设置配置默认值
  2.  
    var instance = axios.create({
  3.  
    baseURL:'https://api.example.com'
  4.  
    });
  5.  
    //在实例创建后改变默认值
  6.  
    instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

3、配置优先级顺序
配置将与优先顺序合并。 顺序是lib / defaults.js中的库默认值,然后是实例的defaults属性,最后是请求的config参数。 后者将优先于前者。 这里有一个例子。

  1.  
    //使用库提供的配置默认值创建实例
  2.  
    //此时,超时配置值为`0`,这是库的默认值
  3.  
    var instance = axios.create();
  4.  
     
  5.  
    //覆盖库的超时默认值
  6.  
    //现在所有请求将在超时前等待2.5秒
  7.  
    instance.defaults.timeout = 2500;
  8.  
     
  9.  
    //覆盖此请求的超时,因为它知道需要很长时间
  10.  
    instance. get('/ longRequest',{
  11.  
    timeout:5000
  12.  
    });
  • 拦截器
    你可以截取请求或响应在被 then 或者 catch 处理之前
  1.  
    //添加请求拦截器
  2.  
    axios.interceptors.request.use( function(config){
  3.  
    //在发送请求之前做某事
  4.  
    return config;
  5.  
    },function(error){
  6.  
    //请求错误时做些事
  7.  
    return Promise.reject(error);
  8.  
    });
  9.  
     
  10.  
    //添加响应拦截器
  11.  
    axios.interceptors.response.use(function(response){
  12.  
    //对响应数据做些事
  13.  
    return response;
  14.  
    },function(error){
  15.  
    //请求错误时做些事
  16.  
    return Promise.reject(error);
  17.  
    });

如果你以后可能需要删除拦截器。

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

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

  1.  
    var instance = axios.create();
  2.  
    instance.interceptors.request.use(function () {/*...*/});
  • 处理错误
  1.  
    axios.get( '/ user / 12345')
  2.  
    .catch(function(error){
  3.  
    if(error.response){
  4.  
    //请求已发出,但服务器使用状态代码进行响应
  5.  
    //落在2xx的范围之外
  6.  
    console.log(error.response.data);
  7.  
    console.log(error.response.status);
  8.  
    console.log(error.response.headers);
  9.  
    } else {
  10.  
    //在设置触发错误的请求时发生了错误
  11.  
    console.log('Error',error.message);
  12.  
    }}
  13.  
    console.log(error.config);
  14.  
    });

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

  1.  
    axios.get( '/ user / 12345',{
  2.  
    validateStatus:function(status){
  3.  
    return status < 500; //仅当状态代码大于或等于500时拒绝
  4.  
    }}
  5.  
    })
  • 消除
    您可以使用取消令牌取消请求。

    axios cancel token API基于可取消的promise提议,目前处于阶段1
    您可以使用CancelToken.source工厂创建一个取消令牌,如下所示:

  1.  
    var CancelToken = axios.CancelToken;
  2.  
    var source = CancelToken.source();
  3.  
     
  4.  
    axios.get('/user/12345', {
  5.  
    cancelToken: source.token
  6.  
    }).catch(function(thrown) {
  7.  
    if (axios.isCancel(thrown)) {
  8.  
    console.log('Request canceled', thrown.message);
  9.  
    } else {
  10.  
    // 处理错误
  11.  
    }
  12.  
    });
  13.  
     
  14.  
    //取消请求(消息参数是可选的)
  15.  
    source.cancel('操作被用户取消。');
  16.  
     

您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌:

  1.  
    var CancelToken = axios.CancelToken;
  2.  
    var cancel;
  3.  
     
  4.  
    axios.get('/ user / 12345',{
  5.  
    cancelToken:new CancelToken(function executor(c){
  6.  
    //一个执行器函数接收一个取消函数作为参数
  7.  
    cancel = c;
  8.  
    })
  9.  
    });
  10.  
     
  11.  
    // 取消请求
  12.  
    clear();

注意:您可以使用相同的取消令牌取消几个请求。

  • 使用application / x-www-form-urlencoded格式

默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

1、浏览器
在浏览器中,您可以使用URLSearchParams API,如下所示:

  1.  
    var params = new URLSearchParams();
  2.  
    params.append('param1', 'value1');
  3.  
    params.append('param2', 'value2');
  4.  
    axios.post('/foo', params);
  5.  
    请注意,所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。

或者,您可以使用qs库对数据进行编码:

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

2、Node.js
在node.js中,可以使用querystring模块,如下所示:

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

3、TypeScript
axios包括TypeScript定义。

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

axios在很大程度上受到Angular提供的$http服务的启发。 最终,axios努力提供一个在Angular外使用的独立的$http-like服务。

作者:____chen
来源链接:https://www.cnblogs.com/chenhuichao/p/9261645.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17808.html

标签: vue
分享给朋友:

“vue-resource和axios区别” 的相关文章

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染

出现情况: 在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式: dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false this.$alert(...

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤 首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

Vue中自定义标签及其使用

Vue中自定义标签及其使用

Vue中自定义标签及其使用 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入...

vue.js快速搭建图书管理平台

vue.js快速搭建图书管理平台

上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用。   前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue.js——60分钟browserify项目模板快速入门

Vue.js——60分钟browserify项目模板快速入门

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也...

vue中axios的封装

vue中axios的封装

https://juejin.im/post/5b55c118f265da0f6f1aa354 掘金的网址(很好) 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promi...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。