likes
comments
collection
share

Vue封装Axios

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

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
评论
请登录