Axios 企业级3封装以及常见的get和post请求写法

简洁用法-------发送get请求

# 第一种 （适合少量参数）
axios.get('/api/url?参数名1=参数值1&参数2=参数值2').then(res => {
    // res.data就是后端响应的数据
}).catch(err => {
    // err就是错误信息（请求挂掉了 断网了）
})

# 第二种（适合多个参数）
axios.get('/api/url', {
    params: {
        参数名1：参数值，
        参数名2：参数值
    }
}).then(res => {
    // res.data就是后端响应的数据
}).catch(err => {
    // err就是错误信息（请求挂掉了 断网了）
})

简洁用法--------发送post请求

# 发送post请求 （ 记得： 只有一层{}哦~~~ ）
axios.post('/api/url', {
     参数名1：参数值，
     参数名2：参数值
}).then(res => {
    // res.data就是后端响应的数据
}).catch(err => {
    // err就是错误信息（请求挂掉了 断网了）
})

axios.post('/api/url', Qs.stirngify({ // 把参数格式转为 Form Data （仿form表单数据提交）
     参数名1：参数值，
     参数名2：参数值
}).then(res => {
    // res.data就是后端响应的数据
}).catch(err => {
    // err就是错误信息（请求挂掉了 断网了）
})

对象写法------get请求

const API = 'http://139.9.177.51:3333'
// 第一种
axios({
    method: 'get',
    url: API + '/api/testGet?name=小貂蝉',
}).then(res => {
    console.log(res.data)
}).catch(err => {
    console.log(err)
})

// 第二种
axios({
    method: 'get',
    url: API + '/api/testGet',
    params: {
        name: '老貂蝉'
    }
}).then(res => {
    console.log(res.data)
}).catch(err => {
    console.log(err)
})

对象写法------Post请求

const API = 'http://139.9.177.51:3333'

axios({
    method: 'post',
    url: API + '/api/testPost',
    data: {
        name: '翔仔'
    }
}).then(res => {
    console.log(res.data)
}).catch(err => {
    console.log(err)
})

实例对象写法

 // const API = 'http://139.9.177.51:3333'

// 创建一个axios的实例对象
const instance = axios.create({
    baseURL: 'http://139.9.177.51:3333', // 请求服务器地址 会自动拼接在 请求地址前面
    timeout: 10000, // 超时时间 
})

// 使用instance来发送ajax
instance.get('/api/testGet?name=小貂蝉')
    .then(res => {
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    })

instance.post('/api/testPost', {
    name: '小飞飞'
})
    .then(res => {
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    })


// 使用instance来发送ajax
instance({
    method: 'get',
    url: '/api/testGet',
    params: {
        name: '小貂蝉1'
    }
})
    .then(res => {
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    })

instance({
    method: 'post',
    url: '/api/testPost',
    data: {
        name: '小飞飞'
    }
})
    .then(res => {
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    })

在公司一般3层封装

        为了统一管理接口，方便后期维护。

第一层

安装axios  Yarn add axios  ||  npm i axios -D   封装请求 默认地址 请求拦截器 响应拦截器 请求超时 在utils文件下 新建一个工具 request.js  配置地址 拦截器 超时

// 1. 引入axios
import axios from 'axios';

// 请求默认地址
axios.defaults.baseURL = 'http://127.0.0.1:5000/';
// 请求超时
axios.defaults.timeout = 10000;
// 请求拦截器
axios.interceptors.request.use((config) => {
    
    return config;
}, (error) => {
    // 失败回调
    return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use((response) => {
    
    return response;
}, (error) => {
    // 失败回调
    return Promise.reject(error);
});

// 暴露当前文件
export default axios

第二层 

分模块管理自己的接口 方便维护新建一个api文件夹，封装模块对应的接口。

如：账号模块 建立一个acc.js 

/ 账号模块  专门管理账号
import request from '@/utils/request';
// 引入qs  安装axios后会自动安装qs node和php写的后台需要用qs转一下，java不用。
// qs只需要在post请求中 转换参数  Qs.stringify(参数)
import Qs from 'qs';

// 登录接口
export const login_api = (data) => {
    return request({
        method: 'post',  // 请求方式
        url: '/users/checkLogin', // 请求地址
        data: Qs.stringify(data) // 参数
      });
}

//post

export const acc_api = (params) => {
    return request({
        method: 'get',  // 请求方式
        url: '/users/checkLogin', // 请求地址
        params: params // 参数
      });
}

//get 是params post 是data 对象里面可以简写

第三层： 在组件中调用对应的api文件

先在组件中引入 第二层
import { login_api } from '@/api/acc.js'
// 点击登录按钮
        submitForm() {
            // ui框架自带的方法 validate((valid)=>{ valid就是验证结果 });
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    // 调用api函数 传入对应的参数
                    let res = await login_api({
                        account: this.loginForm.acc,
                        password: this.loginForm.pwd,
                    })
                    console.log(res.data)
                    let { code, msg, role, token } = res.data
                    // 判断一下 code
                    if (code == 0) {
                        this.$message({
                            type: 'success',
                            message: msg,
                        })
                    } else {
                        this.$message.error(msg)
                    }
                } else {
                    return
                }
            })
        },


发请求的方式 有2中
方式一：
函数({参数1,参数2}).then((res)=>{ 成功回调 }).catch((err)=>{ err失败回调 })

方式二:
async 父函数(){
   let res = await 函数(x1,x2)
res就是响应结果
}

简单第二种封装接口

import axios from "axios"//导入需要axios

axios.defaults.baseURL="http://127.0.0.1:5000"

//封装一个登录函数
export const checkLogin=params=>axios.post("/users/checkLogin",params)

// export const checkLogin=function(params){
//     return axios.post("/users/checkLogin",params)
// }

//封装添加账号函数
export const usersAdd=params=>axios.post("/users/add",params)


//封装获取账号列表
export const usersList=params=>axios.get("/users/list",{params})


//修改用户
export const usersEdit=params=>axios.post("/users/edit",params)


//验证token
export const checkToken=params=>axios.get("/users/checktoken",{params})


//根据id获取个人信息
export const accountInfo=params=>axios.get("/users/accountinfo",{params})