网站数据请求,先安装 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);
    });
  },