vue axiox网络请求

一、首先安装axios ，vue-axios

前提：搭建一个vue3的项目

项目搭建参考：https://www.cnblogs.com/yclh/p/15356171.html

使用npm安装axios

npm install axios

npm install vue-axios

二、文件结构

文件说明：

vue.config.js:为了解决跨域问题添加的文件。

network->config.js:配置网络接口中的公共设置

network->http.js:创建axios的实例instance，并编写get、post的通用方法，这里还设置了请求拦截器和相应拦截器。

network->index.js:设置具体调用的接口路径和提供给App.vue的方法。

注：这里要的接口路径是后端提供的可以访问的get和post接口。

例如：/xyresourcesinfot/xyResourcesInfoT/list 这个路径是后台提供的。

App.vue:页面展示为了调用http网络接口效果。

三、效果

分别展示：

1、不带参数的get请求。

2、带参数的get请求。

3、 form-data形式的post请求

四、源码：

vue.config.js

//创建vue.config.js文件
  module.exports = {
    lintOnSave: false, //是否在保存时检查
    devServer: {
        host: 'localhost', //本机ip
        port: 8080, //本机端口
        open: true,
        proxy: {
            '/api': { //代理别名
                target: 'http://192.168.0.8:8081', //代理目标值
                changeOrigin: true,
                secure: true,
                pathRewrite: { //替换路径中的/api
                    '^/api': ''
                }
            }
        },
        overlay: {
            warning: false,
            errors: true
        }
    }
  }

config.js

export default {
    baseUrl: {
      dev: "/api/xy", // 开发环境
      changeOrigin: true,
    },
  };

http.js

import axios from "axios"; // 引用axios
import qs from 'qs';
import config from "@/network/config";
 
const instance = axios.create({
    baseURL: config.baseUrl.dev,
    timeout: 60000,
     
    // post 使用form-data
    transformRequest: [function(data) {
        data = qs.stringify(data);
        return data;
    }],
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
});
 
//get请求
export function get(url, params = {}) {
    // console.log('22222')
    // console.log(params)
    return new Promise((resolve, reject) => {
        instance.get(url, {
                params: params,
            })
            .then((response) => {
                resolve(response);
            })
            .catch((err) => {
                reject(err);
            });
    });
}
//post请求
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, data).then(
            (response) => {
                resolve(response.data);
            },
            (err) => {
                reject(err);
            }
        );
    });
}
 
 
  //-------------------- axios的拦截器----------------------
  // 1.请求拦截的作用
  instance.interceptors.request.use(config => {
     console.log('进入请求拦截'  );
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    return config
  }, err => {
    // console.log(err);
  })
 
  // 2.响应拦截
  instance.interceptors.response.use(res => {
      console.log('进入相应拦截');
    return res
  }, err => {
    console.log(err);
  })
 
// 请求拦截器  post 使用form-data
// instance.interceptors.request.use(
//   config => {
//     config.data = qs.stringify(config.data) // 转为formdata数据格式
//     return config
//   },
//   error => Promise.error(error)
// )

index.js

import { get,post } from "@/network/http";
export const getResourcesMany = (params) => get("/xyresourcesinfot/list",params);
export const getResourcesSingle = (params) => get("/xyresourcesinfot/get/",params);
export const PostUserInfoT = (data) => post("/xyuserinfot/add",data);

App.vue

<template>
    <div>
        <div>{{noParams}}</div>
        <button @click="getNoParams">get请求网络数据 不带参数</button>
        <h2>-----------------------------------</h2>
        <div>{{haveParams}}</div>
    <!--  <button @click="getHaveParams({  'smallType': '103',  'needPoint': '100'  } )">get请求网络数据 带参数</button> -->
         
        <button @click="getHaveParams">get请求网络数据 带参数</button>
        <h2>-----------------------------------</h2>
         
         
        <div>{{postResult}}</div>
        <button @click="PostHaveParams">Post请求网络数据 带参数</button>
        <h2>-----------------------------------</h2>
    </div>
</template>
 
<script>
    import { computed,ref } from 'vue'
    import { useStore } from 'vuex'
    import { getResourcesMany,PostUserInfoT     } from '@/network/index.js';
 
    export default {
        components: {},
        setup() {
            let noParams = ref('get没有参数');
            let haveParams = ref('get有参数');   
            let postResult = ref('post演示数据');  
             
              
            let getNoParams = () => {
                getResourcesMany()
                .then(res => {
                    console.log(res.data.obj.dataList[0]);
                     noParams.value = res.data.obj.dataList[0];})
                .catch(error => { });
            }
              
            let params =    {
                smallType : '103',
                needPoint : '100'
              } 
             
            let getHaveParams = () => {
                getResourcesMany(params)
                .then(res => {
                    console.log(res.data.obj.dataList[0]);
                     haveParams.value = res.data.obj.dataList[0];})
                .catch(error => { });
            }
             
             
            let paramsData =    {
               userEmail: 'yangcheng8517@163.com',
               userPassword: 'yangcheng123412312356$abc',
               otherName: 'yc'
              } 
               
                
             
            let PostHaveParams = () => {
                console.log('1111');
                console.log(paramsData);
                PostUserInfoT(paramsData)
                .then(res => {
                    console.log(res);
                     postResult.value = res})
                .catch(error => { });
            }
             
            return {
                noParams  ,haveParams,
                getNoParams,getHaveParams,PostHaveParams,
                params ,paramsData,postResult
            }
        } 
         
        // methods: {
        // getCompany() {  
        //  getData()
        //  .then(res => {
        //      //console.log(res.data);
        //      console.log(res.data.obj.dataList[0]);
         //     这里不是响应式的
        //      this.result.value = res.data.obj.dataList[0];})
        //  .catch(error => { });
        // }
        // } 
 
 
    }
</script>