后端也能看懂的axios使用和简单封装

简介：axios的使用在现在的vue前端项目中基本是必需的一个一个组件，它完成着发送请求，和获取请求数据的重任，那么如何引进和跟好的使用，就是本篇文章的内容

1.使用axios

1.1下载

在vue项目中，直接使用下面这个命令就可以，最好是带上版本，不要使用最新版，我使用最新版的时候，项目打包编译就有问题，降低版本就可以使用了。

npm install axios@1.5.0

这样下载好相关的资源就可以使用了。在要发送请求的文件引入axios就可以使用了

import axios from 'axios'

1.2发送get请求

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

1.3发送post请求

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

2.封装axios

我们可以看到上面就已经可以完成基本的请求和处理响应的数据了，但是很多的地方很麻烦，比如说请求的url每次都要写很长，能不能直接就写后面业务的地址，还有就是上面这样使用，axios请求就直接写在了vue文件里面，请求一多就很难看，也不方便管理。所以说需要对axios进行简单的封装。

1.首先新建一个文件夹request

2.在request下面新建两个js文件

http.js文件这个文件在后端的领域里面这个文件更像是一个配置文件，它里面配置了axios的一些基本的请求参数，就比如说请求的基本路径和端口

下面就是这个文件的代码

import axios from'axios'
let Ip="127.0.0.1"
let host="8999"
const api=axios.create({
    baseURL:"http://"+Ip+":"+host,
    timeout:3000
})
export default api;

下面就是这个UserAxios文件了，这个文件的作用比较像后端的service接口了，里面定义了各种各样不同的请求，我们在要使用这些相关的请求的时候就 引入一个对象，然后在用这个对象去调用里面的方法。

import api from "./http";
const requestMapping = "user/";
const user = {
  getUserList: (params) =>
    api({
      url: requestMapping + "getUserList",
      method: "post",
      data: {},
      params: {
        pageSize: 10,
        currentPage: 0
      }
    })
};
export default user;

现在就是使用了

3.使用封装的axios发送请求

在要发送请求的页面引入

import user from './request/UserAxios'

再在方法里面使用

 user.getUserList().then(res=>{
        console.log(res.data.data.records[0])
      })
    }
  }

这样每次发送请求每次都要在页面写很多就变成了，引入对象，调用对象的方法。