likes
comments
collection
share

Vue封装Axios

作者站长头像
站长
· 阅读数 6

Vue封装Axios

axios是一个基于Promise的HTTP请求库,它可以在浏览器和Node.js中使用。axios的功能非常请打,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。

  1. 安装Axios

    npm install axios -S
    
  2. 封装Axios

    import axios from 'axios'
    
    /*
        请求的Content-Type要和后台对应
        formdata格式可以使用qs或者querystring 推荐qs
        qs安装指令: npm install qs -S
        querystring安装指定: npm install querystring -S
        安装之后请求拦截的时候处理一个data格式就行
        example: if(config.method === 'post') config.data = qs.stringity(config.data);
    */
    const errorHandle = (status,info) => {     
        switch(status){
            case 400:
                console.log("语义有误");
                break;
            case 401:
                console.log("服务器认证失败");             
                break;
            case 403:
                console.log("服务器拒绝访问");             
                break;
            case 404:
                console.log("地址错误");
                break;
            case 500:
                console.log("服务器遇到意外");             
                break;
            case 502:
                console.log("服务器无响应");             
                break;
            default:
                console.log(info);
                break;
        }
    }
    // 创建实例
    const Service = axios.create({
        // 请求地址
        baseURL: process.env.VUE_APP_BASE_API,
        // 配置请求头
        // headers: {
            // 'Content-Type': 'application/json;charset=utf-8'
            // 'Content-Type': 'application/x-www-form-urlencoded'
        // },
        // 超时时间
        timeout: 20000
    });
    
    // 请求拦截
    Service.interceptors.request.use(config => {
        if(sessionStorage.getItem('token')) config.headers['token'] = sessionStorage.getItem('token');
        return config;
    }, error => {
        console.error('Request Error:', error);
        return Promise.reject(error);
    });
    // 响应拦截器
    Service.interceptors.response.use(response => {
        if (response.status === 200 && response.data.code === 200) return Promise.resolve(response.data);
        else return Promise.reject(response.data);
    }, error => {
        console.log('Response Error:', error);
        const { response } = error;
        errorHandle(response.status,response.info)
        return Promise.reject(error);
    });
    
    export default Service;
    
  3. (可选)封装路径

    // path.js
    const base = {
       baseUrl:"http://iwenwiki.com",
       chengpin:"/api/blueberrypai/getChengpinDetai ls.php"
    }
    
    export default base;
    
    // index.js
    import path from "./path"
    import axios from "../utils/request"
    export default {
        getChengpin(){
            return axios.get(path.baseUrl + path.chengpin)
        }
    }
    
  4. 常用API封装

    1. get(url[, config])

      发送get请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    2. delete(url[, config])

      发送delete请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    3. head(url[, config])

      发送head请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    4. options(url[, config])

      发送options请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    5. post(url[, data[, config]])

      发送post请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    6. put(url[, data[, config]])

      发送put请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    7. patch(url[, data[, config]])

      发送patch请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

    8. request(config)

      发送自定义请求。config是请求的配置对象,包含请求的各种选项,如请求url、方法、数据、请求头等。返回一个Promise对象,响应结果包含在其中。

    import Service from './config'
    
    export const AGet = config => Service({...config, method: 'get', params: config.data});
    
    export const ADelete = config => Service({...config, method: 'delete', params: config.data});
    
    export const AHead = config => Service({...config, method: 'head', params: config.data});
    
    export const AOptions = config => Service({...config, method: 'options', data: config.data});
    
    export const APost = config => Service({...config, method: 'post', data: config.data});
    
    export const APut = config => Service({...config, method: 'put', data: config.data});
    
    export const APatch = config => Service({...config, method: 'patch', data: config.data});
    
    export const ARequest = config => Service({...config, method: 'request', data: config.data});
    
  5. Axios 常用的请求配置项

    • url (类型: string, 必填): HTTP 请求的服务器地址
    • method (类型: string, 默认: get): HTTP 请求方法
    • data (类型: Object, Array): 要发送的数据
    • params (类型: Object): 作为查询字符串添加到请求 URL 中的参数, 用于 GET, HEAD 和 DELETE 请求。
    • headers (类型: Object): HTTP 请求的头部信息
    • timeout (类型: number): 请求超时时间,单位为毫秒,默认为 0,即没有超时时间。
    • responseType (类型: string): 响应数据的格式, 默认是 json
    • transformRequest (类型: Function): 对请求数据进行任意转换函数,函数接受传递的参数为请求核心对象
    • transformResponse (类型: Function): 对响应数据进行任意转换函数,函数接受传递的参数为响应核心对象
    • validateStatus (类型: Function): 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise ;如果 validateStatus 返回 true (或者设置为 null 或undefined), 则promise 将会 resolved,否则是 rejected。
  6. 跨域问题

    所谓跨域,指的是在客户端(浏览器)发起请求时,请求的目标资源位于另一个域名/端口/协议上,就是跨域。在跨域场景下,浏览器为了保护用户隐私和安全,通常会限制页面在未经允许的情况下访问跨域的资源。常见的跨域场景包括:

    1. 不同域名之间的跨域访问(如 www.example.com 访问 api.example.com)
    2. 同一服务器使用不同端口号(如 80 和 8080)的跨域访问
    3. HTTP 和 HTTPS 之间的跨域访问
    4. 不同域名之间使用不同的协议(如 http 和 https)的跨域访问

    跨域访问的实现需要符合同源策略(Same-Origin Policy),即只允许源(协议、域名、端口)相同的网页脚本进行交互操作,否则浏览器会阻止跨域操作,保护用户安全。在跨域的情况下,通常可以通过一些手段来解决,如 CORS(跨域资源共享)等。

    在Vue3中遇到跨域问题时,可以通过在vue.config.js中进行配置来解决。需要在vue.config.js中添加proxy选项,如下所示:

    // vue.config.js
    export default {
      server: {
        proxy: {
          // 在此处为需要解决跨域的 API 配置代理
          '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            rewrite: path => path.replace(/^/api/, '') // 去掉 /api 前缀
          }
        }
      }
    }
    

基础使用

get请求

axios({
    method: "get",
    url: "http://iwenwiki.com/api/blueberrypai/getChen gpinDetails.php"
}).then(res => {
    console.log(res.data);
})
axios.get("http://iwenwiki.com/api/blueberryp ai/getChengpinDetails.php").then(res =>{
      console.log(res.data);
})

post请求

axios({
    method:"post",
    url:"http://iwenwiki.com/api/blueberrypai/l ogin.php",
    data:qs.stringify({
        user_id:"iwen@qq.com",
        password:"iwen123",
        verification_code:"crfvw"
    })
}).then(res =>{
    console.log(res.data);
})
axios.post("http://iwenwiki.com/api/blueberry pai/login.php", qs.stringify({
      user_id: "iwen@qq.com",
      password: "iwen123",
      verification_code: "crfvw"
})).then(res => {
      console.log(res.data);  
})
转载自:https://juejin.cn/post/7350860703639420966
评论
请登录