前端Vue学习之路(四)axios请求数据

1.增加新知识

假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动

所以封装一下axios,每个组件都通过一个媒介去请求数据,假如axios要改动,只要改媒介就行了,

为什么要创建一个实例呢，因为有的网站只请求一个域名的数据,假如要请求多个域名的数据,可以创建几个实例,方便后期好用

2.旧方案

直接在views下创建test_axios.vue

<template>
  <div>
      <button @click="test()">按钮</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    methods:{
        test(){
            console.log("test")
            axios.get('/')
            .then(res=>{
                console.log("res:",res);
            })

        }
    }
}
</script>

<style>

</style>

3.新方案（一）

在src目录下创建network文件夹
,在network文件夹下创建request.js,
增加以下内容

import axios from 'axios'

export function request(config,success,failure){
    //1.创建一个实例
    const instance=axios.create({
        baseURL:'http://127.0.0.1:5000',
        timeout:5000
    })
    //2.
    instance.interceptors.response.use(res=>{
    	//响应的内容很多,包括一些状态之类的,这里我们只需要data信息
        return res.data
    },err=>{
        console.log(err)
    })
    //3.发送真正的网络请求
    instance(config)
    .then(res=>{
        success(res)
    })
    .catch(err=>{
        failure(err)
    })
}

新增test1_axios.vue
目录:src/views/test1_axios.vue

<template>
  <div>
    <button @click="test()">按钮</button>
  </div>
</template>

<script>
import { request } from "../network/request";

export default {
  data: function () {
    return {
      message: 'msg',
    };
  },

  created: function () {
  //如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,建议接口不复杂会放created里面,接口多复杂的话会放在mounted里面.
    this.fetch();
  },

  //方法
  methods: {
    fetch() {
      request(
        {
          url: "",
        },
        (res) => {
          console.log(res);
        }
      );
    },
  },
};
</script>

<style>
</style>

4.为什么要用拦截器

export function request(config,success,failure){
    //1.创建一个实例
    const instance=axios.create({
        baseURL:'http://127.0.0.1:5000',
        timeout:5000
    })
    //2.axios的拦截器
    //2.1请求拦截
    //1.比如`config`中的一些信息不符合服务器的要求,config就是请求的内容
	//2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标,比如:加			载中
	//3.某些网络请求(比如登录token),必须携带一些特殊的信息
    instance.interceptors.request.use(config=>{
        return config
    },err=>{
        console.log(err)
    })
    //2.2响应拦截
    instance.interceptors.response.use(res=>{
    	//响应的内容很多,包括一些状态之类的,这里我们只需要data信息
        return res.data
    },err=>{
        console.log(err)
    })

    //3.发送真正的网络请求
    instance(config)
    .then(res=>{
        success(res)
    })
    .catch(err=>{
        failure(err)
    })
}

(新方案二)

在src目录下创建api目录
src\api\brand.js
src\api\login.js
src\utils\request.js
创建brand.js

import request from '@/utils/request'
export function fetchList(params) {
  return request({
    url:'/brand/list',
    method:'get',
    params:params
  })
}
export function createBrand(data) {
  return request({
    url:'/brand/create',
    method:'post',
    data:data
  })
}
export function deleteBrand(id) {
  return request({
    url:'/brand/delete/'+id,
    method:'get',
  })
}

再创建一个login.js

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/admin/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

export function getInfo() {
  return request({
    url: '/admin/info',
    method: 'get',
  })
}
export function fetchList(params) {
  return request({
    url: '/admin/list',
    method: 'get',
    params: params
  })
}

src\views\axios_test2.vue
在axios_test2.vue中,添加以下内容

<template>
  <div>
    <button @click="getList" >获取列表</button> 
    读取列表的数据:{{getlist}} 
  </div>
</template>
<script>
//两种方法
//import {fetchList} from '../api/brand';
import {fetchList} from '@/api/brand';
export default {
  data() {
    return {
      getlist: "",
    };
  },
  methods: {
    getList() {
      fetchList().then((response) => {
        this.getlist = response.data;
        console.log("response:", response);
      });
    },
  },
};
</script>

src\utils\request.js

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: "http://192.168.19.199:5000/", // api的base_url
  timeout: 5000 // 请求超时时间
})

export default service