Vue2 开发总结 axios 二次封装 | 请求、响应、渲染的大致流程分析

1. Axios 简介


Axios GitHub 地址:https://github.com/axios/axios
Axios 官网:https://axios-http.com/
Axios 是用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,运用非常广泛,前端框架例如 React、Vue 都是基于 Node.js 开发的,Node.js 可以开发 Web 应用程序中的后台系统。
(我们平时使用的 npm 命令本质上就是通过 Node.js 来运行的)

Promise 是由 JavaScript 中实现的 ECMAScript6 规范推出的新特性,主要解决了 JS 回调地狱的问题,通常用于异步编程,可以更好的处理回调的场景

Axios 本质上是 AJAX 的拓展版,所以它的功能和 AJAX 一样,向指定的 URL 发送请求,并处理结果。在 Github https://github.com/axios/axios 上,官方给出了许多示例。

2. Vue2二次封装Axios


由于我目前仅接触过Vue2,所以本篇的 Axios 是基于 Vue2版本对其应用。
运行环境:

  • “axios”: “^0.17.1”
  • “vue”: “^2.5.2”
  • “element-ui”: “^2.0.10”

2.1 定义简易的 Token 工具脚本文件

在之前的学习中,我们会把用户登录信息记录到 session,但是这种方式的安全性并不高,只要拿到 浏览器的 sessionId 就可以在异地登录。而使用 token 能更好的记录用户信息,因为 token 相当于用户的身份凭证,具有时效性,既可以设置过期时间,又可以用来检验身份,同时支持在多个设备登录,为了方便,我们通过 浏览器支持的 JavaScript 内置对象 localStorage 来管理 token。
token.js

export function getToken() {
   
  return localStorage.token
}

export function setToken(token) {
   
  return localStorage.token = token
}

export function removeToken() {
   
  return localStorage.removeItem('token')
}

2.2 封装 Axios

index.js

import {
   getToken} from '@/request/token'

const service = axios.create({
   
  baseURL: 'http://localhost:8888',	// 设置请求的地址
  timeout: 10000										// 设置超时时间, 10000 ms 
})
//request拦截器: 用于封装请求头
service.interceptors.request.
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue中使用axios进行二次封装的步骤如下所示: 第一步,在项目的`apis`文件夹下创建一个`http.js`文件,用于封装axios请求方法。在该文件中,通过`export`将方法暴露出去,方便在所需页面进行调用。例如,可以创建一个获取用户列表信息的方法`get_users`: ```javascript import http from './index.js' export const get_users = (params) => { return http({ method: "GET", url: "users", params: params }) } ``` 第二步,设置基地址和拦截器。可以使用axios的`create`方法创建一个自定义的axios实例,并在其中设置基地址和拦截器。例如: ```javascript import axios from 'axios' const request = axios.create({ baseURL: '基地址1', timeout: 5000 }) request.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) }) request.interceptors.response.use(function (response) { // 对响应数据做点什么 return response.data }, function (error) { // 对响应错误做点什么 return Promise.reject(error) }) ``` 第三步,在页面中引入`http.js`文件,并调用自己所配置好的请求方法。可以使用`import`语句引入`http.js`中暴露的方法,然后在页面的方法中使用`async`和`await`对请求方法进行异步请求,最终可以直接获取到请求的数据信息。例如: ```javascript import { get_users } from '../apis/http.js' export default { props: {}, data() { return {} }, created() { // 在钩子函数中调用自定义的getUserList方法 this.getUserList() }, methods: { // 自定义方法中调用get_users方法,通过async和await进行异步请求 async getUserList() { // 调用get_users方法并获取请求数据 let { data: res } = await get_users(params) // 在页面上渲染数据 // console.log(res) } }, components: {} } ``` 这样,在Vue中就可以使用axios进行二次封装,并通过引入和调用自定义的请求方法来获取数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vueaxios二次封装](https://blog.csdn.net/m0_63905956/article/details/125589282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vueaxios二次封装](https://blog.csdn.net/qq_20623665/article/details/128243379)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值