论坛 › IOS › Axios 网络请求库

杀鸡焉用牛刀 发表于 4 天前

Axios 网络请求库

官网：https://github.com/axios/axios
1.安装依靠

# Axios 必要单独安装 
npm install --save axios
如果不加--save，则以全局的形式导入
# post 请求参数是必要额外处置惩罚，安装依靠; 参数转换格式: qs.stringify({})
npm install --save querystring
如果不加--save，则以全局的形式导入
②组件中引入：import { axios } from "axios"
③GET请求
axios({
    method: "get",
    url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res => {
    console.log(res.data);
})
axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
.then(res => {
    console.log(res.data);
})
④POST请求
axios({
    method: "post",
    url: "http://iwenwiki.com/api/blueberrypai/login.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/blueberrypai/login.php", qs.stringify({
    user_id: "iwen@qq.com",
    password: "iwen123",
    verification_code: "crfvw"
})).then(res => {
    console.log(res.data);
})
2. Axios 网络请求封装

在实际应用过程中，一个项目中的网络请求会很多，此时一般接纳的方案是将网络请求封装起来。
①我们先创建 src/utils/request.js 文件，用来存储网络请求对象 axios。
mport axios from "axios"
import qs from "querystring"
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 instance = axios.create({
    timeout:5000 // 网络请求的公共设置: 请求超时时间
})
// 发送数据前的拦截器
instance.interceptors.request.use(
    config => {
        if(config.method === "post") {
            config.data = qs.stringify(config.data);
        }
        return config; // 包罗网络请求的全部信息
    },
    error => Promise.reject(error)
)
// 获取数据前的拦截器
instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error => {
        const { response } = error;
        errorHandle(response.status, response.info);
    }
)
export default instance;
②创建 src/api/path.js 用来存放网络请求路径；创建 src/api/index.js 用来存放网络请求路径。
// path.js
const base = {
    baseUrl:"http://iwenwiki.com",
    chengpin:"/api/blueberrypai/getChengpinDetails.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);
    }
}
③在组件中直接调用网络请求
<script>
import api from './api/index';
export default {
    name: "APP",
    mounted() {
        api.getChengpin().then(res => {
            console.log(res.data);
        })
    }
}
</script>
3. 网络请求跨域解决方案

JS 接纳的是同源计谋。同源计谋是浏览器的一项安全计谋，浏览器只允许 js 代码请求当前所在服务器的域名、端口、协议雷同的数据接口上的数据，这就是同源计谋。
也就是说，当协议、域名、端口任意一个不雷同时，都会产生跨域问题，所以又应该怎样解决跨域问题呢？
跨域错误提示信息：http://iwenwiki.com/api/FingerUnion/list.php
 
现在主流的跨域解决方案有两种：后台解决：cors；前台解决：proxy
①我们找到父工程下的 vue.config.js 或 vite.config.js 文件，向它的 defineConfig 项中添加以下设置：
// vue.config.js设置
devServer: {
  proxy: {
  '/api': {
    target: 'http://xxxxxxxxxxx.xxx/api',
    changOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}
// vite.config.js设置
server: {
  proxy: {
    '/api': {
      target: 'http://iwenwiki.com/api', // 凡是遇到 /api 路径的请求，都映射到 target 属性
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '') // 重写 /api 为 空，就是去掉它
    }
  }
}
②怎样访问跨域的地址？
mounted() {
  // 使用'/url'代替域名部门即可
  axios.get("/api/FingerUnion/list.php")
  .then(res => {
    console.log(res.data);
   })
}
注意：解决完跨域设置之后，要记得重启服务器才行哦
<template>
        <div>
                <el-row v-for="item in list">
                        <el-col :span="8">
                                <h2>{{item.title}}</h2>
                        </el-col>
                        <el-col :span="8">
                                <img :src="item.thumbnail" alt=""/>
                        </el-col>
                        <el-col :span="8">
                                <p>{{item.introduction}}</p>
                        </el-col>
                </el-row>
               
        </div>
</template>

<style>
        @media (min-width: 1024px) {
                .about {
                        min-height: 100vh;
                        display: flex;
                        align-items: center;
                }
        }
        img {
                width: 200px;
                height: 200px;
        }
</style>

<script setup>
        import {
                ref,
                reactive,
                onMounted
        } from 'vue'
        import axios from 'axios';
        let list = reactive([])
        //如果想要渲染，需要不同步
        onMounted(()=>{
                let p = axios.get('/api/cmedical/list2?pageNo=2&pageSize=20')
                p.then((res) => {
                        // list = res.data.list会无法触发渲染，只能一个个加入
                        let data = res.data.list
                        for (let i = 0; i< data.length;i++){
                                list = data;
                        }
                        console.log(list);
                })
        })
</script> import { fileURLToPath, URL } from 'node:url'
//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
    vue(),
    vueJsx(),
],
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
},
server: {
    proxy: {
      '/api': {
      target: 'https://server.dayi.org.cn/api',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
      }
    }
}

})
效果：
https://i-blog.csdnimg.cn/blog_migrate/297468e8d555a88aa452754ee1340b75.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: Axios 网络请求库