精华内容
下载资源
问答
  • axios安装
    2021-11-17 21:38:56

    1.在使用Vue进行开发过程中,由于Vue2.0以后的版本不具备通信功能,所以采用axios进行后端通信功能,其作用等同于ajax,安装axios也比较简单,直接输入命令:npm install axios@0.21.0 --save

    然后回车即可。

    更多相关内容
  • 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
    }
    
    展开全文
  • axios安装与基本方法

    千次阅读 2022-02-02 18:05:57
    安装: 1.npm安装: npm install axios 2.在主入口文件main.js中引用: import axios from 'axios' Vue.use(axios); 3.在组件文件中的methods里使用: getNewsList(){ this.axios.get('api/getNewsList'...

    安装:

    1.npm安装:

    npm install axios

    2.在主入口文件main.js中引用:

    import axios from 'axios'
    
    Vue.use(axios);
    

    3.在组件文件中的methods里使用:

    <template>
    	<section class="jumbotron">
    		<h3 class="jumbotron-heading">Search Github Users</h3>
    		<div>
    			<input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
    			<button @click="searchUsers">Search</button>
    		</div>
    	</section>
    </template>
    
    <script>
    	import axios from 'axios'
    	export default {
    		name:'Search',
    		data() {
    			return {
    				keyWord:''
    			}
    		},
    		methods: {
    			searchUsers(){
    				//请求前更新List的数据
    				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
    				axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
    					response => {
    						console.log('请求成功了')
    						//请求成功后更新List的数据
    						this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
    					},
    					error => {
    						//请求后更新List的数据
    						this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
    					}
    				)
    			}
    		},
    	}
    </script>
    

    常用API:

    1.get请求:查询数据,直接从后台获取数据,参数写在地址(url)里,第一个参数是url(API的一个地址,由后端提供);

    2.post请求:添加数据,一般在填写表单并提交时,要将输入的数据写在数据库里,参数一般放在对象中;

    3.put请求:修改数据

    4.delete请求:删除数据

    使用方式示例

    1.执行get数据请求

    axios.get('url',{
        params:{
            id:'接口配置参数(相当于url?id=xxxx)',
        },
    })
    .then((res)=>{
        console.log(res);   //  处理成功的函数 相当于success
    })
    .catch((error)=>{
        console.log(error)  //  错误处理 相当于error
    })
    

    2.执行post数据发送

    const data = {
        name:'张三',
        age:23
    }
    axios.post('url',data)
    .then((res)=>{
        console.log(res);   //  处理成功的函数 相当于success
    })
    .catch((error)=>{
        console.log(error)  //  错误处理 相当于error
    })
    

    3.执行delete 数据发送

    //  如果服务端将参数作为java对象来封装接受
    axios.delete('demo/url', {
        data: {
            id: 123,
            name: 'Henry',
        },
        timeout: 1000,
    })
    //  如果服务端将参数作为url参数来接受,则请求的url为:www.demo/url?a=1&b=2形式
    axios.delete('demo/url', {
        params: {
            id: 123,
            name: 'Henry',
        },
        timeout: 1000
    })
    

    4.执行put 数据发送

    axios.put('demo/url', {
        id: 123,
        name: 'Henry',
        sex: 1,
        phone: 13333333
    })
    

    示例摘自:

     axios使用方法 - 简书

    展开全文
  • axios 安装使用

    2020-12-29 22:42:33
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:1.从浏览器中创建 XMLHttpRequest2.支持 Promise ...

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:

    1.从浏览器中创建 XMLHttpRequest

    2.支持 Promise API

    3.客户端支持防止CSRF

    4.提供了一些并发请求的接口(重要,方便了很多的操作)

    5.从 node.js 创建 http 请求

    6.拦截请求和响应

    7.转换请求和响应数据

    8.取消请求

    9.自动转换JSON数据

    PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略

    axios安装:  npm install axios

    axios使用:

    1、main.js: import axios from 'axios'

    2、Vue.prototype.http = axios

    3、this.http({

    method:'post',

    url:'',

    data:Data,

    })

    .then(function(res){

    console.log('success',res);

    })

    .catch(function (error) { // 请求失败处理

    console.log(error);

    });

    bug:请求接口时报404

    解决:

    展开全文
  • axios安装与使用

    2021-08-06 09:45:51
    文章预览1、安装2、引入3、使用方式一方式二4、具体使用get方法无参数时:get方法有参数时方法一:get方法有参数时方法二:5、全局默认设置 参考文章https://www.jianshu.com/p/523b0690a003 1、安装 npm install ...
  • 如果淘宝景象没问题,很有可能是网络连接不好导致的
  • Vue axios安装 qs安装

    千次阅读 2020-03-30 16:10:41
    好多人使用都是npm开头安装 我自己安的时候报各种错 然后就在前面加了c 变成cnpm就可以了 cnpm install axios --save cnpm install qs 引用 import Axios from "axios" Vue.prototype.$axios = Axios ...
  • 1. 安装配置 axios 。 直接vscode安装 cmd npm install --save axios 2配置 main.js //引入axios模块 import axios from 'axios' //默认基础路径 axios.defaults.baseURL = 'http://localhost:3000' //原型...
  • VUECLI3 axios安装配置

    2022-01-06 09:06:16
    VUECLI3 axios安装配置
  • npm安装命令输入后显示: Clear up some disk space and try again 解决方法: 删除node_module文件夹,package-lock.json文件,然后npm cache clean -f 安装成功:
  • axios安装指令及数据请求1、axios安装指令:cnpm axios --save在核心文件(main.js)中引入import axios from 'axios'Vue.prototype.$axios = sxiosv-for="(item,index) in goods":key="index"style="border:1px solid...
  • axios安装失败解决方法

    千次阅读 2020-12-29 22:42:33
    anxios安装失败,报错npm ERR! Refusing to delete / code EEXIST解决办法:重装npm,cd %ProgramFiles%\nodejsren npm.cmd npm2.cmdren npm npm2npm2 install npm@latest -gdel npm2del npm2.cmd`具体解决方案参照...
  • Vue中axios 安装与操作

    2021-01-08 11:24:10
    1.axios介绍 1. vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现 2. axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐... ... 2.axios安装 1. npm install axios -S #
  • 关于cmd中使用npm install axios安装axios报错command failed: npm install --loglevel error的解决方案
  • axios是什么?是干什么的?(就是从后台调取数据的功能) Axios是一个基于 promise 的 ...1.安装axios 查看是否在正确的目录下下载的,在终端输入dir看见package.json ,那你的目录就是对的。 终端输入npm install
  • axios 安装与操作

    千次阅读 2020-12-19 16:36:32
    1.axios介绍## 1. vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现## 2. axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护#...
  • axios安装使用

    万次阅读 2019-08-15 14:43:35
    1.进入项目运行命令,原因同v-resource安装 cnpm install axios --save 2.在需要使用时引入 如: 使用按照gitubs上提供的示例做就可以了
  • Vue axios 安装与引入

    千次阅读 2021-02-24 11:44:57
    一、安装 二、引入 一、安装 Vue 项目中安装 npm i axios -S 安装成功后可在 package.json 文件中查看安装的版本 二、引入 全局引入,赋在 Vue 的原型上。main.js 文件中注册。 import Vue from 'vue' ...
  • 安装 npm install axios 在assets下新建http.jx import axios from 'axios'; var myaxios = {}; var aass = {}; myaxios.install = function(Vue){ var axios_obj = axios.create({ baseURL: '...
  • axios安装及使用

    2019-03-07 23:20:56
    使用npm安装 $ npm install axios $ npm install --save axios vue-axios 入口文件引入 import axios from ‘axios’ Vue.prototype.$ axios=axios //全局注册,使用方法为:this.$axios axios....
  • 1.安装axios npm install axios 2.脚手架中使用axios main.js中导入axios import axios from 'axios'; //在main.js中可全局配置默认 axios.defaults.baseURL = 'https://api.example.com'; //基础URL axios....
  • axios 安装 yarn add axios 检查是否安装成功: axio请求例子: <template> <div class="home"> </div> </template> <script> //引入axios import axios from 'axios'; //补充...
  • 1、安装nodejs 1、下载地址为:https://nodejs.org/en/ 2、一路点击Next,检查是否安装成功 3、提高我们的效率,使用镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=...
  • axios 安装和使用

    千次阅读 2021-04-19 18:33:12
    # 安装axios指定版本 npm install axios@0.21.0 --save # axios使用 <script lang="ts"> import {defineComponent} from 'vue'; import axios from "axios"; export default defineComponent({ name: 'Home...
  • vue-axios安装

    千次阅读 2018-08-17 17:11:56
    vue-axios + axios 入坑基础安装 首先,有时候直接安装 axios 在 vuecil 会报错 先安装! npm install axios 然后! npm install --save axios vue-axios 配置模板(index.js) import Vue from 'vue' ...
  • vue:axios安装与使用

    2021-12-10 10:37:46
    安装 npm install axios 引入 在main.js中引入axios import axios from 'axios' Vue.prototype.$axios = axios 使用 在vue页面中使用axios this.$axios.get('url', { params: { id: 1 } }).then(res =&...
  • ![图片说明](https://img-ask.csdn.net/upload/201808/30/1535594878_712255.png)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,322
精华内容 14,928
关键字:

axios安装