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('后台鏈接口的不同處',可以傳參可不傳)