vue3封装网络请求

在src下新建一个文件夹和文件js

 

 然后在js文件里写入

　　

import axios from 'axios' //引入下载的axios


const instance = axios.create({
    baseURL:'接口地址',
    timeout:5000 //几秒
})//创建实例

instance.interceptors.request.use( //拦截器
    config=>{
        //config.headers.token ="12346"
        //要进行的操作
      console.log("--------- 查看是否拦截到 config--------------")
        return config   //放行
    },
    error=>{   
        return Promise.reject(error)
    }
)

instance.interceptors.response.use(    //请求拦截器
    response=>{
        console.log("--------- 查看是否拦截到 response--------------")
        return response;
    },
     error=>{
        return Promise.reject(error)
    }
)



export function get(url,params){ //导出一个方法自定义名称get
    return instance .get(url,{   //返回 axios的get方法
        params
    })
}  

export function post(url,params){
    return instance .post(url,params,{
         transformRequest:[   //转化要传入的为字符串
            function(data){
                let str = '';
                for(let key in data){
                    str +=encodeURIComponent(key)+
                    '='
                    + encodeURIComponent(data[key])+'&'
                }
                console.log(str)
                return str
            }
        ],
        headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        }
    })
}


export function del(url){  //删除
    return instance.delete(url)
}
  

在请用的组件中引用get或post

import {get或post} from '找到新建路径的js'

import {get} from '../network/request'

在需要请求的链接的位置使用

get('/linke',{id:1}).then(res=>{

　　this.links= res.data //将请求到的数据放到data的数据里

}).catch(err=>{

　　console.log(err)

})

get('后台链接口的不同处',可以传参可不传)

post('/link/add',this.llink).

.then(res=>{

　　this.links= res.data //将请求到的数据放到data的数据里

}).catch(err=>{

　　console.log(err)

})

 

get('后台链接口的不同处',可以传参可不传)