精华内容
下载资源
问答
  • vue3安装axios
    千次阅读
    2021-08-26 15:03:31

    1. 安装axios

    npm install axios

    2.配合vue-axios使用

    npm install vue-axios --save

    3.在main.js中引入

    import axios from 'axios';

    import VueAxios from 'vue-axios'

    4. 注册使用

    createApp(App).use(VueAxios,axios).mount('#app')

     

    更多相关内容
  • 最近在学习Vue3,使用vue cli4搭建了一个demo项目,安装axios后,控制台报错: Uncaught TypeError: Cannot read property 'use' of undefined at eval (axios.js?be3b:59) at Module../src/plugins/axios.js (app...

    最近在学习Vue3,使用vue cli4搭建了一个demo项目,安装axios后,控制台报错:

    Uncaught TypeError: Cannot read property 'use' of undefined
        at eval (axios.js?be3b:59)
        at Module../src/plugins/axios.js (app.js:1229)
        at __webpack_require__ (app.js:854)
        at fn (app.js:151)
        at eval (main.ts:10)
        at Module../src/main.ts (app.js:1217)
        at __webpack_require__ (app.js:854)
        at fn (app.js:151)
        at Object.1 (app.js:1290)
        at __webpack_require__ (app.js:854)
    

    根本原因是 引入的axios库是使用vue2.0开发的一套组件库,而我们当前的项目为vue3,所有存在兼容性的问题。

    在vue2中,我们这样使用axios:
    在这里插入图片描述
    之所以能使用Vue.use,是因为在vue2中我们使用 new Vue 来创建Vue实例,官网也说了,这样的做法会带来很多问题:
    在这里插入图片描述
    在这里插入图片描述
    所以 Vue3 引入了新的全局 API:createApp
    在这里插入图片描述

    在Vue3中,我们可以使用 config.globalProperties 替换 Vue.prototype。

    最终全局引入axios方式:

    axios.js:

    "use strict";
    
    // import Vue from 'vue';
    import axios from "axios";
    
    // Full config:  https://github.com/axios/axios#request-config
    // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
    // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
    let config = {
      // baseURL: process.env.baseURL || process.env.apiUrl || ""
      // timeout: 60 * 1000, // Timeout
      // withCredentials: true, // Check cross-site Access-Control
    };
    
    const _axios = axios.create(config);
    
    _axios.interceptors.request.use(
      function(config) {
        // Do something before request is sent
        return config;
      },
      function(error) {
        // Do something with request error
        return Promise.reject(error);
      }
    );
    
    // Add a response interceptor
    _axios.interceptors.response.use(
      function(response) {
        // Do something with response data
        return response;
      },
      function(error) {
        // Do something with response error
        return Promise.reject(error);
      }
    );
    
    export default {
      install: function (app, options) {
        console.log(options)
        // 添加全局的方法
        app.config.globalProperties.axios = _axios;
        // 添加全局的方法
        app.config.globalProperties.$translate = (key) => {
          return key
        }
      }
    }
    

    main.js:

    import axios from './plugins/axios.js'
    app.use(axios)
    

    使用:

    // getCurrentInstance代表全局上下文,ctx相当于Vue2的this,
    // 但是特别注意ctx代替this只适用于开发阶段,等你放到服务器上运行就会出错,
    // 所以使用proxy替代ctx,才能在你项目正式上线版本正常运行
    
     const { ctx, proxy }:any = getCurrentInstance();
     proxy.axios.post('api/Login',{card:111}).then((e:any)=>{
    	console.log(e)
     })
    
    展开全文
  • Vue3使用axios的配置教程

    万次阅读 多人点赞 2022-03-23 12:00:12
    一、安装axios npm install axios --save 二、配置axios,添加拦截器 在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下: import axios from 'axios' // 创建一个 axios 实例 ...

    axios中文网站:axios-http.com/zh/

    一、安装axios

    npm install axios --save
    

    二、配置axios,添加拦截器

    在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下:

    import axios from 'axios'
    
    // 创建一个 axios 实例
    const service = axios.create({
    	baseURL: '/api', // 所有的请求地址前缀部分
    	timeout: 60000, // 请求超时时间毫秒
    	withCredentials: true, // 异步请求携带cookie
    	headers: {
    		// 设置后端需要的传参类型
    		'Content-Type': 'application/json',
    		'token': 'your token',
    		'X-Requested-With': 'XMLHttpRequest',
    	},
    })
    
    // 添加请求拦截器
    service.interceptors.request.use(
    	function (config) {
    		// 在发送请求之前做些什么
    		return config
    	},
    	function (error) {
    		// 对请求错误做些什么
    		console.log(error)
    		return Promise.reject(error)
    	}
    )
    
    // 添加响应拦截器
    service.interceptors.response.use(
    	function (response) {
    		console.log(response)
    		// 2xx 范围内的状态码都会触发该函数。
    		// 对响应数据做点什么
    		// dataAxios 是 axios 返回数据中的 data
    		const dataAxios = response.data
    		// 这个状态码是和后端约定的
    		const code = dataAxios.reset
    		return dataAxios
    	},
    	function (error) {
    		// 超出 2xx 范围的状态码都会触发该函数。
    		// 对响应错误做点什么
    		console.log(error)
    		return Promise.reject(error)
    	}
    )
    
    export default service
    
    

    三、使用axios发送请求

    在src目录下新建一个apis文件夹,这里面放入今后所有的请求文件,例如新建一个请求用户信息的接口user.ts,代码如下:

    // 导入axios实例
    import httpRequest from '@/request/index'
    
    // 定义接口的传参
    interface UserInfoParam {
    	userID: string,
    	userName: string
    }
    
    // 获取用户信息
    export function apiGetUserInfo(param: UserInfoParam) {
        return httpRequest({
    		url: 'your api url',
    		method: 'post',
    		data: param,
    	})
    }
    

    接着在具体业务页面里使用这个请求,例如:

    <script setup lang="ts">
    import { onMounted } from 'vue'
    import { apiGetUserInfo } from '@/apis/user'
    
    function getUserInfo() {
    	const param = {
    		userID: '10001',
    		userName: 'Mike',
    	}
    	apiGetUserInfo(param).then((res) => {
    		console.log(res)
    	})
    }
    
    onMounted(() => {
    	getUserInfo()
    })
    </script>
    
    展开全文
  • vue3 axios安装及使用

    万次阅读 2021-10-27 10:29:23
    vue3 axios安装及使用 安装 使用npm安装 $ npm install axios 封装axios /* * @Author: Axios封装 * @Date: 2020-12-08 10:39:03 * @LastEditTime: 2021-10-22 11:34:08 * @LastEditors: Please set ...

    vue3 axios安装及使用

    安装

    使用npm安装

    $ npm install axios
    

    封装axios

    /*
     * @Author: Axios封装
     * @Date: 2020-12-08 10:39:03
     * @LastEditTime: 2021-10-22 11:34:08
     * @LastEditors: Please set LastEditors
     * @Description: In User Settings Edit
     * @FilePath: \blogs-s\src\api\index.ts
     */
    import axios from 'axios';
    import qs from "qs";
    import store from "@/store/index";
    import router from '@/router/index';
    import { dataList } from '@/components/aspin/data';
    import { message } from 'ant-design-vue';
    import { storage } from '../storage/storage';
    
    //数据请求字符
    axios.defaults.baseURL = process.env.VUE_APP_API_URL,
      // 如果请求话费了超过 `timeout` 的时间,请求将被中断
      axios.defaults.timeout = 5000;
    // 表示跨域请求时是否需要使用凭证
    axios.defaults.withCredentials = false;
    // axios.defaults.headers.common['token'] =  AUTH_TOKEN
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
    // 允许跨域
    axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*";
    
    // 请求拦截器
    axios.interceptors.request.use(function (config) {
      if (
        config.method === "post" ||
        config.method === "put" ||
        config.method === "delete"
      ) {
        // qs序列化
        config.data = qs.parse(config.data);
      }
      // 若是有做鉴权token , 就给头部带上token
      if (storage.get(store.state.Roles)) {
        store.state.Roles
        config.headers.Authorization = storage.get(store.state.Roles);
      }
      return config;
    }, error => {
      message.error(error.data.error.message);
      return Promise.reject(error.data.error.message);
    })
    
    // 响应拦截器
    axios.interceptors.response.use(function (config) {
    
    
      dataList.show = true
      if (config.status === 200 || config.status === 204) {
        setTimeout(() => {
          dataList.show = false
        }, 400)
        return Promise.resolve(config);
      } else {
        return Promise.reject(config);
      }
    },
      function (error) {
    
        if (error.response.status) {
          switch (error.response.status) {
            case 400:
              message.error("发出的请求有错误,服务器没有进行新建或修改数据的操作==>" + error.response.status)
              break;
    
            // 401: 未登录
            // 未登录则跳转登录页面,并携带当前页面的路径
            // 在登录成功后返回当前页面,这一步需要在登录页操作。                
            case 401: //重定向
              message.error("token:登录失效==>" + error.response.status + ":" + store.state.Roles)
              storage.remove(store.state.Roles)
              storage.get(store.state.Roles)
              router.replace({
                path: '/Login',
              });
              break;
            // 403 token过期
            // 登录过期对用户进行提示
            // 清除本地token和清空vuex中token对象
            // 跳转登录页面                
            case 403:
              message.error("用户得到授权,但是访问是被禁止的==>" + error.response.status)
              break;
            case 404:
              message.error("网络请求不存在==>" + error.response.status)
              break;
            case 406:
              message.error("请求的格式不可得==>" + error.response.status)
              break;
            case 410:
              message.error("请求的资源被永久删除,且不会再得到的==>" + error.response.status)
              break;
            case 422:
              message.error("当创建一个对象时,发生一个验证错误==>" + error.response.status)
              break;
            case 500:
              message.error("服务器发生错误,请检查服务器==>" + error.response.status)
              break;
            case 502:
              message.error("网关错误==>" + error.response.status)
              break;
            case 503:
              message.error("服务不可用,服务器暂时过载或维护==>" + error.response.status)
              break;
            case 504:
              message.error("网关超时==>" + error.response.status)
              break;
            default:
              message.error("其他错误错误==>" + error.response.status)
          }
          return Promise.reject(error.response);
        } else {
          // 处理断网的情况
          // eg:请求超时或断网时,更新state的network状态
          // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
          // 关于断网组件中的刷新重新获取数据,会在断网组件中说明
          store.commit('changeNetwork', false);
        }
      }
    )
    export default axios
    

    main.ts:

    全局使用

    import axios from './utils/http/axios'
    全局使用
    // 全局ctx(this) 上挂载 $axios
    app.config.globalProperties.$api = axios
    

    封装使用

    /*
     * @Author: your name
     * @Date: 2021-05-08 11:33:56
     * @LastEditTime: 2021-10-22 10:36:05
     * @LastEditors: Please set LastEditors
     * @Description: In User Settings Edit
     * @FilePath: \blogs-s\src\api\article.js
     */
    import request from '@/utils/http/axios'
    import { IntArticle } from "@/api/data/interData";
    
    export class article {
    
      /**
       * @description: 查询总条数
       */
      static async GetCountAsync() {
        return await request({
          url: "/api/SnArticle/GetCountAsync",
          method: 'get',
        })
      }
    
      /**
       * @description: 查询分类总条数
       * @param {number} id
       */
      static async ConutSort(id: number) {
        return await request({
          url: "/api/SnArticle/GetConutSortAsync?type=" + id + "&cache=true",
          method: 'get',
        })
      }
      /**
       * @description: 模糊查询
       * @param {string} name
       */
      static async GetContainsAsync(name: string) {
        return await request({
          url: "/api/SnArticle/GetContainsAsync?name=" + name + "&cache=true",
          method: 'get',
        })
      }
      /**
       * @description: 按标签模糊查询
       * @param {string} name
       */
      static async GetTypeContainsAsync(tag: string, name: string, chache: boolean) {
        return await request({
          url: "/api/SnArticle/GetTypeContainsAsync?type=" + tag + "&name=" + name + "&cache=" + chache,
          method: 'get',
        })
      }
    
      /**
       * @description: 主键查询
       * @param {number} id
       * @param {boolean} cache
       * @return {*}
       */
      static async GetByIdAsync(id: any, cache: boolean): Promise<any> {
        return await request({
          url: "/api/SnArticle/GetByIdAsync?id=" + id + "&cache=" + cache,
          method: 'get',
        })
      }
      /**
       * @description: 按标签条件查询
       * @param {number} id
       * @param {boolean} cache
       * @return {*}
       */
      static async GetTagtextAsync(id: number, cache: boolean): Promise<any> {
        return await request({
          url: "/api/SnArticle/GetTagAsync?labelId=" + id + "&isDesc=true&cache=" + cache,
          method: 'get',
        })
      }
      /**
       * @description: 标签分页查询
       * @param {number} page
       * @param {number} pagesize
       * @return {*}
       */
      static async GetFyTitleAsync(page: number, pagesize: number, isDesc: boolean, cache: boolean): Promise<any> {
        return await request({
          url:
            "/api/SnArticle/GetFyTitleAsync?" +
            "&pageIndex=" +
            page +
            "&pageSize=" +
            pagesize +
            "&isDesc=" + isDesc + "&cache=" + cache,
          method: 'get',
        })
      }
    
      /**
       * @description: 分类分页查询
       * @param {number} page
       * @param {number} pagesize
       */
      static async GetFySortTitleAsync(page: number, pagesize: number, cache: boolean): Promise<any> {
        return await request({
          url: "/api/SnArticle/GetfySortTestAsync?type=7&pageIndex=" + page + "&pageSize=" + pagesize + "&isDesc=true&cache=" + cache,
          method: 'get',
        })
      }
    
      /**
       * @description: 更新
       * @param {any} resultData
       * @param {string} type
       */
      static async UpdatePortionAsync(resultData: any, type: string): Promise<any> {
        return await
          request({
            // 更新
            url: "/api/SnArticle/UpdatePortionAsync?type=" + type,
            method: "put",
            data: resultData,
          })
      }
    
      /**
       * @description: 新增数据
       * @param {any} resultData
       */
      static async AddAsync(resultData: IntArticle) {
        return await
          request({
            url: "/api/SnArticle/AddAsync",
            method: "post",
            data: resultData,
          })
      }
      /**
       * @description: 更新数据
       * @param {IntArticle} resultData
       */
      static async UpdateAsync(resultData: IntArticle) {
        return await
          request({
            url: "/api/SnArticle/UpdateAsync",
            method: "put",
            data: resultData,
          })
      }
      /**
       * @description: 删除
       * @param {number} id
       * @return {*}
       */
      static async DeleteAsync(id: number) {
        return await
          request({
            url: "/api/SnArticle/DeleteAsync?id=" + id,
            method: "delete",
          })
      }
    }
    
    

    axios 并发请求

    处理并发请求的助手函数

    axios.all(iterable)

    axios.spread(callback)

    //示例:
    import { article } from '@/api/index';
    import { blogsList } from "./components/data";
    import axios from '@/utils/http/axios'
    class methods {
      static async GetFySortTitle() {
        await article.GetFySortTitleAsync(blogsList.page, blogsList.pagesize, true).then((res: any) => {
          blogsList.dataResult = res.data;
        });
      }
      static async ConutSort() {
        await article.ConutSort(7).then((result: any) => {
          blogsList.count = result.data;
        });
      }
    }
    async function QueryAll() {
      // axios.all([await methods.ConutSort(), await methods.GetFySortTitle()]).then(axios.spread((Fy, co: any) => {
      //   blogsList.count = co.data;
      //   blogsList.dataResult = Fy.data;
      // }))
      axios.all([await methods.ConutSort(), await methods.GetFySortTitle()])
    }
    
    export {
      methods,
      QueryAll
    }
    
    展开全文
  • vue3axios封装与使用

    千次阅读 2022-03-16 14:39:33
    1、npm安装 cnpm install axios -S cnpm install qs -S 2、封装axios.js //router import router from "../router/index.js"; //引入路由对象 import { Toast } from 'vant'; // 提示框 // axios import axios ...
  • 主要介绍了vue全局使用axios的方法实例详解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue安装axios

    千次阅读 2022-08-04 08:44:46
    Vue使用axios
  • vue3中使用axios

    千次阅读 2022-06-18 12:42:31
    使用npm安装axios step2. 我们将要使用的axios实例单独编写成一个js文件,文件夹可以建立在src/plugins/(自己选择建立在什么地方)。命名为: step3. 然后在main.js中导入我们编写axiosInstance.js文件,全局...
  • vue 项目安装axios报错

    千次阅读 2022-03-10 22:33:51
    今天打算写一个vue项目模板,在安装axios时遇到了点坑,分享一下 问题: 使用 npm install axios -- save 报错 尝试: 1、使用 淘宝镜像 cnpm install axios -- save 可以安装成功,但是,在pages.json文件中会...
  • Vue3+vite+axios+route示例

    2021-03-22 13:48:26
    Vue3+vite+axios+route示例,包含所有依赖,可直接运行。本次包修复了build的问题。
  • vue3引入axios

    千次阅读 2022-06-15 22:17:22
    vue3引入axios
  • Vue3引入axios封装接口

    万次阅读 多人点赞 2020-10-26 11:56:15
    1.安装 npm install axios -S 2.新建 3.http.js import axios from "axios"; import qs from "qs"; import { Dialog } from "vant"; // axios.defaults.baseURL = '...
  • 主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue 3.x具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue安装axios以及如何使用axios

    千次阅读 2021-11-25 17:08:36
    vue安装axios以及如何使用axios
  • 关于Vue3使用axios的配置教程详解

    千次阅读 2022-06-22 20:21:13
    vue3.0 axios封装
  • VueCli 中安装 axios

    千次阅读 2020-12-12 23:54:00
    介绍 Vue安装 axios 的方法。
  • vue3使用axios

    千次阅读 2021-11-14 03:04:34
    1.cnpm install axios -S //安装axios 2.cnpm install qs -S //可以不装 用来格式化参数 3.在scr目录下新建http文件夹及index.js //index.js: import axios from 'axios' // import qs from "qs";//qs为序列化数据...
  • vue3 axios使用配置

    万次阅读 2020-12-17 21:06:58
    vue3 axios使用配置 安装axios 和 qs cnpm install axios -S cnpm install qs -S 在项目中创建axios.js(尾汁根据自己喜好而定) axios.js import axios from "axios"; import qs from "qs"; import {...
  • Vue3引入axios详解

    千次阅读 2022-01-04 20:52:15
    详细介绍Vue3引入axios的步骤。首先请打开前端项目的文件夹,例如:E:\Dropbox\phoenix\SpringBootProjects\svms\svmsfrontend
  • 怎么在Vue中使用和安装axios

    千次阅读 2022-04-17 21:27:47
    1.先安装axios 在小黑框内输入 npm install --save axios //进行安装下载 成功提示 2.在vue的 main.js中导入axios import axios from 'axios' Vue.prototype.axios = axios 3.如何请求的路径很多,而且...
  • 搜了一下,别人是这样说的:根本原因是 引入的axios库是使用vue2.0开发的一套组件库,而我们当前的项目为vue3,所有存在兼容性的问题。 网上的解决方案也都试了一遍,问了前端的小伙伴他也不知道,但是它建议我用...
  • Vue3开发 axios的用法

    千次阅读 2021-12-26 22:09:19
    如何使用axios发送网络请求
  • Vue3axios请求封装

    千次阅读 2022-03-10 13:41:33
    Vue3axios请求封装
  • Vue项目中安装使用axios

    千次阅读 2022-03-14 14:25:58
    Vue.prototype.$axios = axios; 三、使用 向cgi-bin/login.cgi提交登录data数据。 注意: 提交的Content-Type要看后端以什么方式接收,然后以相应的方式提交,要不然后端收到的就是被转码的乱码。 data的格式按...
  • Vue3axios 封装

    千次阅读 2022-01-17 20:32:21
    最后,在 vue 文件中引入 axios: <script> import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue' import { message } from 'ant-design-vue'; import { UploadOutlined } from '@ant-design/...
  • 基于vue3封装axios

    千次阅读 2021-05-13 18:03:12
    安装axios yarn add axios 实例化axios–设置baseURL,超时时间 const instance = axios.create({ baseURL: 'http://pcapi-xiaotuxian-front.itheima.net/', timeout: 5000 }) 请求拦截器-全局注入token ...
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • vue安装axios

    千次阅读 2019-01-15 15:44:37
    1、在项目根目录下输入如下: $ npm install --save axios 2、在main.js或者需要用到ajax的页面中将它导入 ...3、在main.js中定义全局变量 Vue.prototype.$post = post; Vue.prototype.$get = get; ...
  • vue 3.0 使用axios

    千次阅读 2021-12-10 13:48:03
    一、安装axiosvue-axios 使用yarn: yarn add axios yarn add vue-axios 使用npm npm install axios npm install vue-axios 二、在项目src文件夹建一个可以存放配置文件 三、 config.js文件用来存放后端...
  • vue3axios跨域问题解决记录

    千次阅读 2022-01-20 17:54:55
    ​ 在vue3中使用axios,因为后端运行在本机11000端口,vue运行在8080端口,所以理所当然遇到了跨域问题 问题解决: 网上查了许多方法,试过很多,但最后只用这样做问题就解决了。 (最开始用的好像就是这种办法,但...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 122,100
精华内容 48,840
关键字:

vue3安装axios