当前位置：首页 > 资讯 > 技术文档

详解Vue 2.0封装axios笔记

时间：2020-07-07 20:36 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Vue 2.0封装axios笔记

[b]前言[/b] 单页面应用大多采用前后端分离开发思路，我们知道，前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等)，今天我们主要讲解Ajax部分。最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用，但以后不再把 vue-resource 作为官方的 ajax 方案。 vue更新至2.0之后，官方推荐的Ajax插件库是axios，而不再是vue-resource，理由如上。 [b]axios快速使用[/b] 如何安装请移步[url=https://github.com/mzabriskie/axios]axios[/url]，文档描述的很清楚。 [b]常见用法[/b] 其实我们用的最多的就是get、post请求。 Performing a GET request

// get
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

Performing a POST request

axios.post('/user' , {
 params: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
})
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

掌握了以上两种最基本的用法，我们已经可以去进行开发了。 [b]示例demo[/b] 演示了如何使用axios请求cnode社区的API。请点击[url=https://github.com/heuuLZP/axios_demo]这里[/url] [b]axios的封装[/b] 上一步已经实现用axios请求网络资源，那为什么要封装axios呢？以下几点原因： [list=1] [*]配置通用项[/*] [*]统一处理请求错误，进行提示[/*] [/list] [b]完整源码[/b] 请[url=https://github.com/heuuLZP/vue-axios]点击这里[/url] [b]请求流程[/b] [img]http://files.jb51.net/file_images/article/201706/201706221147017.png[/img] [b]请求失败[/b] 通常请求失败有两种原因： [list=1] [*]网络异常/服务器宕机[/*] [*]后端抛出错误[/*] [/list] 每个后端在请求失败时返回的数据结构大同小异，前后端可以商量好，我的后台返回给我的请求失败接口如下：

{
 "status": 1,
 "msg": "购物车为空",
 "success": false
}

如果只是普通用法，如下所示：

axios.post('/user' , {
 params: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
})
 .then(function (response) {
  // 处理响应
  // 其中存在后端返回的错误
 })
 .catch(function (error) {
  // 网络异常引发的错误
 });

我们知道，一般中大型规模的项目，请求是比较多的，这样导致代码冗余，会越来越臃肿，我们可以对错误进行预处理。 [b]拦截器[/b] 在普通用法中，then()处理响应，catch()处理错误，通过拦截器，可以提前判断，并返回二者之一。这里并没有在拦截器中对错误进行处理，而是将响应或者错误返回到get/post请求的结果中，通过链式处理。

// 请求时的拦截
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);
 });

[b]封装get，post方法[/b] 封装的get/post方法由3部分组成: [img]http://files.jb51.net/file_images/article/201706/201706221147028.png[/img] [b]基本配置[/b] 包括请求方法，基础url，相对url，参数，超时时间，请求头等。 [b]checkStatus()[/b] 链式处理第一步，判断http状态码是否正常，和拦截器一样，请求正常则返回响应，请求异常则返回错误，最后返回结果给checkCode()。 [b]checkCode()[/b] 链式处理第二步，处理上一步的结果，分别处理网络异常，以及后端返回的异常。 [b]在组件中引用[/b] 引入封装后的axios

import http from '../utils/http'
import api from '../utils/api'

使用方法

fetchData: async function () {
   let params = {
   }
   const res = await http.get(api.right, params)
   if (res.data.success) {
    alert('请求成功')
   }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Vue.js搭建移动端购物车界面
下一篇：vue组件如何被其他项目引用

资讯排行榜
更多>>