vue封装网络请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在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(\'后台链接口的不同处\',可以传参可不传)

以上是 vue封装网络请求 的全部内容， 来源链接： utcz.com/z/378580.html

回到顶部