精华内容
下载资源
问答
  • vue项目中引入axios

    千次阅读 2020-05-26 10:02:52
    vue中引入axios 记录一下axios的用法 1.下载依赖 npm install axios --save 2.引入并全局注册 在main.js import axios from 'axios' Vue.prototype.$http = axios //全局注册,使用方法:this.$http 3.配置vue....

    vue中引入axios

    记录一下axios的用法

    1.下载依赖

    npm install axios --save
    

    2.引入并全局注册

    在main.js中

    import axios from 'axios'
    Vue.prototype.$http = axios    //全局注册,使用方法:this.$http
    

    3.配置vue.config.js解决跨域

    proxyTable

    devServer: {
        proxyTable: {
                '/api': {
                    target: 'http://localhost:7001',//后端接口地址
                    changeOrigin: true,//是否允许跨越
                    pathRewrite: {
                        '^/api': '/api',//重写,
                    }
                }
            },
      }
    

    上面配置中,我们根据实际情况只需要修改proxyTable对于配置即可。假设我后端请求地址是http://localhost:7001,所有api的接口url都以/api开头。所以首先需要匹配所有以/api开头的.然后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 ‘^api’ 转为 ‘/api’。如果本身的接口地址就有 ‘/api’ 这种通用前缀,就可以把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。

    CORS
    CORS即跨源资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。但是CORS也具有一定的风险性,比如请求中只能说明来自于一个特定的域但不能验证是否可信,而且也容易被第三方入侵。 这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的koa2-cors

    var koa = require('koa');
    //npm install --save koa2-cors
    var cors = require('koa2-cors');
    var app = koa();
    //开启
    app.use(cors());
    

    这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。

    4.使用get请求

    this.$http.get('/api/fillePath/apiPort', {
        params: {
          ID: 12345 //可选
        }
      }).then( (res) => {
        console.log(res);
      }).catch((err) => {
        console.log(err);
      }) 
    

    5.使用post请求

    this.$http.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }).then((res) => {
        console.log(res);
      }).catch((err) =>  {
        console.log(err);
      });
    

    请求配置

    这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

    
       // `url` 是用于请求的服务器 URL
      url: '/user',
    
      // `method` 是创建请求时使用的方法
      method: 'get', // default
    
      // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
      // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest` 允许在向服务器发送前,修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
      transformRequest: [function (data, headers) {
        // 对 data 进行任意转换处理
        return data;
      }],
    
      // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
      transformResponse: [function (data) {
        // 对 data 进行任意转换处理
        return data;
      }],
    
      // `headers` 是即将被发送的自定义请求头
      headers: {'X-Requested-With': 'XMLHttpRequest'},
      // 前端常用的header格式
      application/x-www-form-urlencoded: a=1&b=2
      application/json: {"a": "1", "b": "2"}
      multipart/form-data: 文件类型
    
      
      
      // `params` 是即将与请求一起发送的 URL 参数
      // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
      params: {
        ID: 12345
      },
    
       // `paramsSerializer` 是一个负责 `params` 序列化的函数
      // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
      paramsSerializer: function(params) {
        return Qs.stringify(params, {arrayFormat: 'brackets'})
      },
    
      // `data` 是作为请求主体被发送的数据
      // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
      // 在没有设置 `transformRequest` 时,必须是以下类型之一:
      // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      // - 浏览器专属:FormData, File, Blob
      // - Node 专属: Stream
      data: {
        firstName: 'Fred'
      },
    
      // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
      // 如果请求话费了超过 `timeout` 的时间,请求将被中断
      timeout: 1000,
    
       // `withCredentials` 表示跨域请求时是否需要使用凭证
      withCredentials: false, // default
    
      // `adapter` 允许自定义处理请求,以使测试更轻松
      // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
      adapter: function (config) {
        /* ... */
      },
    
     // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
      // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
       // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
      responseType: 'json', // default
    
      // `responseEncoding` indicates encoding to use for decoding responses
      // Note: Ignored for `responseType` of 'stream' or client-side requests
      responseEncoding: 'utf8', // default
    
       // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
      xsrfHeaderName: 'X-XSRF-TOKEN', // default
    
       // `onUploadProgress` 允许为上传处理进度事件
      onUploadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
      },
    
      // `onDownloadProgress` 允许为下载处理进度事件
      onDownloadProgress: function (progressEvent) {
        // 对原生进度事件的处理
      },
    
       // `maxContentLength` 定义允许的响应内容的最大尺寸
      maxContentLength: 2000,
    
      // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
      validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      },
    
      // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
      // 如果设置为0,将不会 follow 任何重定向
      maxRedirects: 5, // default
    
      // `socketPath` defines a UNIX Socket to be used in node.js.
      // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
      // Only either `socketPath` or `proxy` can be specified.
      // If both are specified, `socketPath` is used.
      socketPath: null, // default
    
      // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
      // `keepAlive` 默认没有启用
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
    
      // 'proxy' 定义代理服务器的主机名称和端口
      // `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
      // 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
      proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      },
    
      // `cancelToken` 指定用于取消请求的 cancel token
      // (查看后面的 Cancellation 这节了解更多)
      cancelToken: new CancelToken(function (cancel) {
      })
    }
    
    展开全文
  • vue项目中引入axios及使用

    万次阅读 多人点赞 2019-01-22 13:52:24
    vue项目中引入axios及使用 一,下载依赖 $ npm install axios --save 二,引入依赖并全局注册 import axios from ‘axios’ Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios 三,配置config...

    vue项目中引入axios及使用

    一,下载依赖

    $ npm install axios --save

    二,引入依赖并全局注册

    import axios from ‘axios’
    Vue.prototype.$axios = axios

    //全局注册,使用方法为:this.$axios

    三,配置config文件

    (1) ,通过webpack初始化的项目
    在config文件夹中的index.js文件内修改如下:

    dev: {
        env: require('./dev.env'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api': {
                target: 'http://localhost:3000/api/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        host: '192.168.3.xxx',//IP地址
        port: 8080,
        autoOpenBrowser: true,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        cacheBusting: true,
        cssSourceMap: false
    }
    

    (2) ,通过webpack-simple初始化的项目
    在根目录下webpack.config.js文件中修改如下:

    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        host: "192.168.3.xxx",//端口号
        port: 8080,
        proxy: {
          '/api/*': {
            target: 'http://localhost:3000',//跨域要访问的地址及端口
            changeOrigin: true,
            secure: false,
          }
        }
      }
    

    四,使用并发送get请求

    //以下代码也可以封装在函数中,在其他地方调用
    this.$axios.get('/api/fillePath/apiPort', {
        params: {
          ID: 12345 //可选
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });  
    

    五,使用并发送post请求

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    参考链接:
    https://www.cnblogs.com/silent007/p/8603367.html
    https://github.com/axios/axios

    展开全文
  • 我在标题所说的像使用vue-router那样使用axios,就是在Vue.prototype加入$axios。Object.defineProperty(Vue.prototype, '$axios', { get () { return axios } }) 下面我会介绍一下我解决这个问题的路程,感...

            我在标题中所说的像使用vue-router那样使用axios,就是在Vue.prototype中加入$axios。

    Object.defineProperty(Vue.prototype, '$axios', {
      get () { return axios }
    })

            下面我会介绍一下我解决这个问题的路程,感兴趣的可以看一下。

            axios不像vue-resoures那样,是vue的插件,可以直接use之后就可以全局使用,由于我是最近开始接触vue的,所以也想写写vue的插件,就想着把axios封装成插件,万万没想到啊,就是这个想法让我在解决这个问题上兜了一个大圈。

            我首先参考了vuex的源码写出了如下代码:

    import axios from 'axios'
    
    class green {
    	constructor (m_axios) {
    		this.m_axios = axios;
    	}
    
    	printSomething () {
    		console.log('something...')
    	}
    }
    
    function install (Vue) {
    	Vue.mixin({
    	    beforeCreate: function () {
    	        const options = this.$options
    	        // green injection
    	        if (options.green) {
    	          this.$green = typeof options.green === 'function'
    	            ? options.green()
    	            : options.green
    	        } else if (options.parent && options.parent.$green) {
    	          this.$green = options.parent.$green
    	        }
    	    }
    	})
    }
    
    export default {
    	green,
    	install
    }

    这样就可以通过this.$green.axios.get(api)来使用时axios。不过严谨的我怎么能允许$green的存在,太碍眼了,我就又去看了一下vue-router的源码,发现了解决问题的关键,部分关键代码如下:

      Object.defineProperty(Vue.prototype, '$router', {
        get () { return this._routerRoot._router }
      })
    
      Object.defineProperty(Vue.prototype, '$route', {
        get () { return this._routerRoot._route }
      })

    原来在Vue的原型上加属性就可以了。。。

            总结一下:虽然是最初解决问题方向不太正确,导致绕了点路,不过还是因为自己的基础知识掌握的不扎实,还是得多看书啊。

    展开全文
  • vue中引入axios

    千次阅读 2018-09-18 10:29:53
    vue项目中引入axios,它作用和ajax一样来提供网络请求服务。 二. 步骤 1.引用axios:yarn add axios 2.封装axios: /** * @description axios 网络请求封装 * @author xudanfeng */ import axios from '...

    一. 简述

    vue项目中引入axios,它作用和ajax一样来提供网络请求服务。

    二. 步骤

    1.引用axios:yarn add axios

    2.封装axios:

    /**
     * @description axios 网络请求封装
     * @author xudanfeng
     */
    
    import axios from 'axios'
    let querystring = require('querystring')
    
    axios.defaults.baseURL = 'http://****:端口号'
    axios.defaults.timeout = 5000 // 超时时长
    axios.defaults.withCredentials = true // 携带cookie
    // 这样设置无效,需要在拦截器中设置
    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
    
    axios.interceptors.request.use(config => {
      config.headers = {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      }
      return config
    }, err => {
      return Promise.reject(err)
    })
    
    axios.interceptors.response.use(response => {
      console.log(response, 'cccc====')
      return response
    }, err => {
      if (err.response.status === 401) {
        console.log('ddd', router)
        // router.replace('/login')
      }
      return Promise.reject(err)
    })
    
    /**
     * get请求
     * @param {string} url 请求url
     * @param {Object} data 请求参数
     */
    export function get (url, data = {}) {
      return axios.get(url, {params: data})
    }
    
    /**
     * post请求
     * @param {string} url 请求url
     * @param {Object} data 请求参数
     */
    export function post (url, data = {}) {
      return axios.post(url, querystring.stringify(data))
    }
    
    /**
     * post请求
     * @param {string} url 请求url
     * @param {Object} data 请求参数
     */
    export function postWithJson (url, data = {}) {
      return axios.post(url, data)
    }
    
    /**
     * post form参数请求
     *
     * @param {string} url 请求 url
     * @param {Object} data 发送的数据
     * @return {Promise}
     */
    export function form (url, data = {}) {
      return axios.post(url,
        querystring.stringify(data),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
      )
    }
    

    3.使用axios:

    import {get, post, form} from '@/common/net/serviceUtil'
    
    /**
     * 测试列表
     * @param {string} params.name
     * @param {Object} params.pageDto
     *
     * @returns {Promise}
     */
    export function tagList (params) {
      return get('/user/list', params)
    }
    

     

     
    展开全文
  • vue中cdn引入axios和qs

    万次阅读 2018-10-24 10:04:59
    昨天写vue遇到cdn引入axios和qs问题,找了半天,现在分享下。 &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt; &lt;script src="...
  • 项目的node_modules文件夹下可以找到axios文件夹 二、引入 在你需要引入的页面上引入路径 <script src="../../../../node_modules/axios/dist/axios.js"></script> 这样就可以使用了!不需要其他...
  • vue-cli引入axios

    千次阅读 多人点赞 2020-04-17 15:48:12
    1、创建vue-cli项目: https://blog.csdn.net/qq_39648029/article/details/104250067 2、下载依赖: npm install axios --save 3、 在 main.js添加如下代码: import axios from 'axios'; Vue....
  • 随笔-vue项目引入axios

    千次阅读 2019-03-16 21:41:00
    随笔-vue项目引入axios 本文参考链接: 一 安装axios依赖 npm install axios 二 引入axios 在main.js引入,注意与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 import axios from 'axios'...
  • vue项目中axios封装

    2021-01-19 13:44:23
    vue项目开发,把请求接口数据的插件axios封装,方便多人开发,也方便以后管理。 1、首先安装vue项目: 1)cnpm i -g vue-cli //安装全局vue-cli脚手架 2)vue init webpack vueAxios(项目文件夹名) 3)cd vueAxios...
  • vue-cli 引入axios

    万次阅读 2018-03-29 12:54:36
    二、修改原型链,在main.js中引入axios import axios from 'axios' 接着将axios改写为Vue的原型属性, Vue.prototype.$http=axios 这样之后就可在每个组件的methods调用$http命令完成数据请求 三、在组件...
  • Vue项目中安装axios

    千次阅读 2020-05-24 14:57:18
    1.安装axios npm install axios -S 2.全局注册,在main.js 引入 import axios from 'axios' , 注册Vue.prototype.$http = axios
  • 安装axios npm install axios 然后 npm install --save axios vue-axios 用到post请求时,需要...在main.js引入axios import axios from ‘axios’ import VueAxios from ‘vue-axios’ Vue.prototype.axios = ax...
  • vue-cli 引入 axios 并全局配置axios 步骤一:vue add axios (向项目添加axios) 步骤二:在main.js 修改 如图 步骤三:在组件使用时,直接 this.$http.get().then() 即可...... ...
  • vue项目中使用axios和qs

    2019-10-17 10:24:37
    1、安装axios和qs ...2、在项目中的模块使用axios 、qs import axios from 'axios'; import qs from 'qs'; 3、在axios进行接口调用 ①post请求: let data = {name:'1111'}; axios.post('/getUser...
  • vue项目中使用axios

    2018-08-23 15:35:53
    首先安装axios: 1.利用npm安装npm install axios –save 2.直接利用cdn引入 &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  • 近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios'...
  • vue项目中关于axios的二次封装

    千次阅读 2018-07-12 14:56:11
    vue项目开发时,为了对请求的数据做统一处理,如加loading,以及请求消息提示提示等,需要对vue配套的axios进行二次封装//引入axios import axios from 'axios' // 使用element-ui Message做消息提醒 import { ...
  • 从浏览器创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install ...
  • 通常一些小型的项目,没必要大费周章的搭建脚手架,直接以CDN的方式引入vue.js 即可享受到vue的便利性 那么我们想用到vue中的一些功能,比如axios 呢。 注意:Axios与Qs必须配合使用,否则后台会拿不到数据 CDN...
  • vue设置全局axios 和设置基础路径.全局的是写在main.js文件, // 1下载axios // npm i axios 或者 yarn add axios // 2 在min.js 导入axios (根据需求导入不同的位置) import axios from 'axios' // 3设置基础...
  • vue项目中axios的封装

    千次阅读 2017-12-08 10:57:26
    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,...//引入axios import axios from 'axios' let cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.req
  • Vue项目中封装axios 统一管理http请求

    千次阅读 多人点赞 2021-04-21 17:30:30
    在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程,需要对axios进一步封装,方便在项目中的使用。 2、Vue项目结构 在本地创建Vue项目,目录结构如下: - public 静态资源文件 - src ...
  • 首先没有axios的先安装axios(有的话就不需要了直接引入就好了), 1.安装axios 命令: npm install axios 2.在vue里创建文件夹,utils ----再创建request.js文件(在文件里配置) 3.去main.js配置 4....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,003
精华内容 9,601
关键字:

vue项目中引入axios

vue 订阅