vue2-api的封装

首先声明,纯属个人记录,这里记录下vue2接口的封装大体步骤,文章不定时更写,谢谢

1.下载axios

2.导入axios

3.创建axios副本,配置基地址

4.创建请求拦截与响应拦截

5.暴露出去

6.创建api

7.导入调用

1.下载axios

 npm i axios

在src目录下创建一个utils文件,在utils文件中创建一个request.js 代码如下:

2.导入axios

    import axios from 'axios'

3.创建axios副本,配置基地址

    const requets = axios.create({
    baseURL:'接口基地址'
    })

4.创建请求拦截与响应拦截

    //请求拦截
    request.interceptors.reequest.use(
        (config)=>{
        return config
        },
        (error)=>{
        return Proomise.reject(error)
        }
    )
    
    //响应拦截
    request.interceptors.response.use(
        (res)=>{
        return res
        },
        (error)=>{
        return Proomise.reject(error)
        }
    )
    

5.暴露出去

    export default request
    

6.在src目录下创建api文件夹,在api文件夹下创建一个index.js文件夹

    import request from '@/utils/request'
    //登录接口
    export const sysLogin = (data) =>{
        return request ({
            url:'接口地址',
            method:'post',
            data
        })
    }
    

7.导入调用 在需要调用的页面导入接口,并调用

       import {sysLogin}from '@/api/index.js'
       
       created(){
           this.init()
       }
        
       async init(){
           const res=  await sysLogin({
            //接口需要的参数
             name:'123456789',
             passwor:'123456'
            })
            console.log(res)
        }