axios的使用,报错解决及封装请求模块

1.安装axios

npm i axios

安装过程中出现如下报错：  code ERESOLVE   ERESOLVE could not resolve

出现问题的原因：由于npm不同版本库之间命令不兼容。

解决方法：
终端输入命令：npm install axios -save --legacy-peer-deps 

2.创建src/utils/request.js

import axios from "axios"
const request = axios.create({
  baseURL: "基础路径" 
})
export default request

3.创建 src/api/user.js 封装请求方法

import request from "@/utils/request"
import request from "@/utils/request"
// 如下3种写法data代表参数，有参数则传递参数，没有参数可以不写
// 第一种写法
export const login = (data) => {
  return request({
    method: 'GET',
    url: '/api/cart',
    data
  })
}
//第二种写法 
export const login = (data) => {
  return request.get("接口地址", data)
}
//第三种写法
export function login(data) {
  return request.get('接口地址', data);
}
//第四种写法
export function login(data) {
  return request({
    method: 'get',
    url: '接口地址',
    data
  })
}

4.页面注册点击事件请求登录

<button @click="fn">按钮</button>
import { login } from "@/api/user.js";
 methods: {
    async fn() {
      // const res=await login()
      // console.log(res.data.data);
      // 简写如下
      const {data: { data }} = await login();
      console.log(data);
    }
  },