网络数据请求,请求拦截器与响应拦截器

2022-01-10 19:02:51 阅读：116 来源： 互联网

标签：拦截器请求 instance res request 响应 axios

网站数据请求,先安装 axios 模块

npm i axios

在 src 中新建一个文件夹 request ,里面新建一个文件叫 request.js ,

import axios from 'axios'

 1 import axios from 'axios'
 2 
 3 // instance 实例 对象
 4 const instance = axios.create({
 5   baseURL: "http://kumanxuan1.f3322.net:8881/cms",
 6     //延迟时间为5s
 7   timeout: 5000
 8 })
 9 
10 // 主要有两个东西:请求拦截器,响应拦截器
11 
12 //请求拦截器
13 instance.interceptors.request.use(config => {
14   // 什么时候执行这里的代码??  在每个请求发出去之前
15   // config是什么?? 是一个对象 记录本次请求的相关信息
16   // console.log(config);
17   // 这个函数用来做什么??   可以用来做一些请求前的准备工作
18   // 比如:添加请求头
19 
20   // let token = xxxx;
21   // if (token) {
22   //   就在请求头中携带token
23   // }
24   return config
25 }, err => {
26   return Promise.reject(err)
27 })
28 
29 
30 // 响应拦截器
31 instance.interceptors.response.use(res => {
32   // 什么时候执行这里的代码??  后端返回响应,在进入到组件成功的回调函数之前执行
33   // res是什么?? 是一个对象 原先说的额axios封装的res对象
34   console.log(res);
35   // 这个函数用来做什么??   对服务器响应回来的数据做统一的处理
36   return res
37 }, err => {
38   return Promise.reject(err)
39 })
40 
41 export default instance

在 request 里面增加一个 api.js ,这个文件用来统一管理项目中的 api 链接

import instance from './request'
// 这个文件用来统一管理项目中的api链接

// 首页精品推荐的请求
//使用函数,避免请求的时候,在此文件中的所有请求都被请求一次
export const JingpinAPI = () => instance.get("/products/recommend")

在想引用的文件中引用 axios

// 加载模块
import {JingpinAPI} from "@/request/api.js";
    .
    .
    .
created() {
    // 后端设置了响应头,则不存在跨域问题
    // 一下代码作为案例还行,项目九不行,会有缺陷
    // 1 请求头写在哪儿??多个连接都要带请求头这么写??
    // 2 不便于接口的管理
    // 3 容易出现回调地狱
    // api.js中用的函数,在此就该调用的形式写
    JingpinAPI().then((res) => {
      console.log(res);
    });
  },

标签：拦截器,请求,instance,res,request,响应,axios
来源： https://www.cnblogs.com/ywlying/p/15785569.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

网络数据请求,请求拦截器与响应拦截器