概述和安装

axios

axios是通过Promise对ajax的封装，是一个基于Promise 的Http库，可以在浏览器和Node.js中使用。

简单理解为：axios是一个封装好的，基于Promise的发送请求的方法，不用设置回调，直接调用then方法。

安装axios

cnpm install --save axios

安装post请求的格式转换

cnpm install --save querystring

发送请求

请求格式

  axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
            .then(res => {//res是响应信息
                bannerObj.banner = res.data.banner
            })
            .catch(error=>{//捕获错误信息
                 console.log(error)
            })
          

get请求

   import axios from "axios"
            

            axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
            

             axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php?song=mo")
             

             axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php",{
                params:{
                     song:"mo"
                 }
              })
        

post请求

POST接收的网络请求参数需要进行格式转化

npm install --save querystring

  import axios from "axios"
            import qs from "querystring" 
            

            axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
                user_id:"iwen@qq.com",
                password:"iwen123",
                verification_code:"crfvw"
                }))

并发请求

在真实场景中，有可能会需要一次性获取多个网络请求的结果

 import axios from "axios"
            

            function getBanner(){
              return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
            }
            function getChating(){
              return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexChating.php")
            }
            onMounted(() =>{
              axios.all([getBanner(), getChating()])
               .then(axios.spread((banner,chating) =>{
                console.log(banner.data,chating.data);
               }))
            })  

全局引用

全局引用方案一

vue的全局处理方案 app.config.globalProperties可以实现

main.js

   import axios from "axios"
            app.config.globalProperties.$axios = axios
            

  import { getCurrentInstance } from "vue"
            const { proxy } = getCurrentInstance();
            proxy.$axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
        

全局引用方案二

利用依赖注入，利用Provide和Inject

main.js

  import axios from "axios"
            app.provide("axios",axios)
            

            import { inject } from "vue"
            const axios = inject("axios")
            axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
        

跨域配置

修改vite.config.js，修改完要重启服务器

 server: {
                    proxy: {
                      '^/api': {//用/api代替产生跨域的地址,即http://iwenwiki.com
                        target: 'http://iwenwiki.com', //指向当前产生跨域的地址,即后端服务实际地址
                        changeOrigin: true, //开启代理
                        rewrite: (path) => path.replace(/^/api/, '/api/blueberrypai')//让/api代替http://iwenwiki.com/api/blueberrypai,也可以继续拼接
                      }
                    }
                  }

封装

封装axios

src/utils/request.js

  import axios from "axios"
          import qs from "querystring"
          /**
           * 处理响应失败，给开发者更明确的错误信息
           * status:状态吗 2x成功 3x重定向 4x前端错误 5x后端错误
           * info:具体信息
           */
          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;
              }
          }
          /**
           * 创建Axios对象
           */
          const instance = axios.create({
              baseURL: "http://localhost:8001",//公共配置url     
              timeout: 5000,//配置5s超时
              withCredentials: true//访问允许携带cookie
              
            
          })
          /**
           * 拦截器(发送请求/响应结果之前都可以拦截)
           */
          instance.interceptors.request.use(//请求拦截
              //成功函数 config：请求信息
              config => {
                  if (config.method === 'post') {
                      // 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情况
              error => {
                  const { response } = error;
                  if (response) {
                      errorHandle(response.status, response.info)
                  } else {
                      console.log("网络请求被中断了");
                  }
              }
          )
          //导出
          export default instance

封装公共地址和访问接口路径

src/api/base.js

 /**
           * 公共地址和访问接口路径
           */
          const base = {
              baseURL: "http://localhost:8301",     //公共地址  
              login: "/admin/login",                //登录地址
              //username:"/admin/getUsername",         //登录用户名(问题未解决)
              //permission:"/admin/getPermissions",    //登录用户权限(问题未解决)
              permission:"/admin/getPermission",    //登录用户权限(暂时先用)
              linedata:"/line/data",//折线图动态数据
              projectSearch:"/project/search",//项目信息的分页查询
              projectAdd:"/project/add",//添加项目
          }
          //导出
          export default base          
        

封装请求

src/api/index.js

          /**
           * 封装网络请求
           */
          import axios from "../utils/request.js"//引入封装的axios
          import base from "./base.js"//引入封装的公共地址和访问接口路径
          const api = {
              //登录
              getLogin(params) {
                  return axios.post(base.baseURL + base.login, params)
              },
              //获取登录用户名
              //getUsername(){
              //    return axios.get(base.baseURL+base.username)
              //},
              //获取用户权限
              //getPermissions(){
              //    return axios.get(base.baseURL+base.permission)
              //},
              //获取用户权限(暂用)
              getPermissions(params) {
                  return axios.get(base.baseURL + base.permission, {//get请求记得加{}
                      params
                  })
              },
              //获取折线图数据
              getLinedata() { return axios.get(base.baseURL + base.linedata) },
              //项目信息的分页查询
              getProjectSearch(params) {
                  return axios.get(base.baseURL + base.projectSearch, {//get请求记得加{}
                      params
                  })
              },
              addProject(params){
                  return axios.put(base.baseURL+base.projectAdd,params)
              }
          }
          //导出
          export default api           
        

使用

  import axios from "../utils/request"
          

            axios.get("/api/blueberrypai/getIndexBanner.php")
              .then(res => {
                console.log(res.data.banner)
              })
              .catch(error => {
                console.log(error)
              })
            axios.post("/api/blueberrypai/login.php", {
              user_id: "iwen@qq.com",
              password: "iwen123",
              verification_code: "crfvw"
            })
              .then(res => {
                console.log(res.data);
              })
              .catch(error => {
                console.log(error);
              })
        

分页查询封装

   /**
           * 网路请求：分页查询
           *  */
          const http = (search, page, size) => {
              api.getProjectSearch({
                  search, page, size
              }).then(res => {
                  console.log(res.data)
                  if (res.data.code == 200) {
                      totalData.value = res.data.data.total
                      projectSearch.list = res.data.data.records
                  }
              }).catch(error => {
                  console.log(error);
              })
          }
          

          onMounted(() => {
                http(null, 1, 10)
            })