精华内容
下载资源
问答
  • axios使用
    千次阅读
    2022-05-16 16:19:24

    一、安装

    cnpm install axios
    

    二、使用

    三种写法

    // 第一种写法
    axios.get('/query?name=tom').then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    // 第二种写法
    axios.get('/query', {
        params: {
            name: 'tom'
        }
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    // 第三种写法
    axios({
      method: 'get',
      url: '/query',
      data: {
        name: 'tom',
      }
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    

    POST请求

    axios.post('/query', {
        name: 'tom',
        icon: 'img_path'
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    

    并发请求

    function getUserAccount() {
      return axios.get('/query?name=tom');
    }
    
    function getUserPermissions() {
      return axios.get(/role?name=tom');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
        .then(response) {
        console.log(response);
        // 两个请求都执行完成后返回,所有的请求结果都在这个res的对象下面
    }));
    

    三、参数配置

    axios({
      // 请求的服务器 URL
      url: '/user',
    
      // 创建请求时使用的方法
      method: 'get', // 默认是 get
    
      // 将自动加在 url 前
      baseURL: 'https://some-domain.com/api/',
    
      // 在向服务器发送前,修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
      transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return data;
      }],
      
      // 在传递给 then/catch 前,修改响应数据
      transformResponse: [function (data) {
        // 对 data 进行任意转换处理
        return data;
      }],
    
      // 自定义请求头
      headers: {'X-Requested-With': 'XMLHttpRequest'},
    
      // 与请求一起发送的 URL 参数
      params: {
        ID: 12345
      },
    
      // 用于 params 的序列化的函数
      paramsSerializer: function(params) {
        return Qs.stringify(params, {arrayFormat: 'brackets'})
      },
    
      // 请求发送的数据,适用于 PUT, POST, 和 PATCH
      // 在没有设置 transformRequest 时,必须是以下类型之一:
      // string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      // 浏览器专属:FormData, File, Blob
      // Node 专属: Stream
      data: {
        firstName: 'Fred'
      },
    
      // 指定请求超时毫秒数(0 表示无超时时间)
      timeout: 1000,
    
      // 表示跨域请求时是否需要使用凭证,默认 false
      withCredentials: false, 
    
      // 允许自定义处理请求,常用用于测试
      adapter: function (config) {
        /* ... */
      },
    
      // 表示应该使用 HTTP 基础验证,并提供凭据,该参数会在 headers 设置 Authorization
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
      // 表示服务器响应的数据类型,
      // 支持类型:arraybuffer, blob, document, json(默认), text, stream
      responseType: 'json', 
    
      // 用作 xsrf token 的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', 
    
      //  xsrf token 值的 HTTP 头的名称
      xsrfHeaderName: 'X-XSRF-TOKEN', 
    
      // 上传处理进度事件
      onUploadProgress: function (progressEvent) {
      },
    
      // 下载处理进度事件
      onDownloadProgress: function (progressEvent) {
      },
    
      // 响应内容的最大尺寸
      maxContentLength: 2000,
    
      // 定义对于给定的HTTP 响应状态码。
      validateStatus: function (status) {
        return status >= 200 && status < 300; 
      },
    
      // 定义在 node.js 中 follow 的最大重定向数目,为0将不会 follow 任何重定向
      maxRedirects: 5, 
    
      // 在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
    
      // 'proxy' 定义代理服务器的主机名称和端口
      // `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
      proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: : {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      }
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    
    更多相关内容
  • axios使用方法

    千次阅读 2021-07-15 09:19:26
    1、基本用法 安装 cnpm i axios --save ...在组件中使用 axios <script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) } } &

    axios封装代码传送门(可直接使用)

    1、基本用法

    安装

    cnpm i axios --save
    

    main.js 中引入 axios

    import axios from 'axios'
    Vue.prototype.$axios = axios
    

    在组件中使用 axios

    <script>
    	export default {
    		mounted(){
    			this.$axios.get('/goods.json').then(res=>{
    				console.log(res.data);
    			})
    		}
    	}
    </script>
    

    2、axios请求方法

    axios可以请求的方法:

    • get:获取数据,请求指定的信息,返回实体对象
    • post:向指定资源提交数据(例如表单提交或文件上传)
    • put:更新数据,从客户端向服务器传送的数据取代指定的文档的内容
    • patch:更新数据,是对put方法的补充,用来对已知资源进行局部更新
    • delete:请求服务器删除指定的数据

    2.1、get请求

    示例代码

    //方法一,请求格式类似于 http://localhost:8080/goods.json?id=1
    this.$axios.get('/goods.json',{
        			params: {
                        id:1
                    }
    			}).then(res=>{
    					console.log(res.data);
    				},err=>{
    					console.log(err);
    			})
    			
    //方法二
    this.$axios({
    		method: 'get',
    		url: '/goods.json',
        	params: {
                id:1
            }
    	}).then(res=>{
    		console.log(res.data);
    	},err=>{
    		console.log(err);
    	})
    

    2.2、post请求

    post请求一般分为两种类型

    • form-data 表单提交,图片上传、文件上传时用该类型比较多
    • application/json 一般是用于 ajax 异步请求

    示例代码

    //方法一
    this.$axios.post('/url',{
    				id:1
    			}).then(res=>{
    				console.log(res.data);
    			},err=>{
    				console.log(err);
    			})
    
    //方法二
    $axios({
    	method: 'post',
    	url: '/url',
    	data: {
    		id:1
    	}
    }).then(res=>{
    	console.log(res.data);
    },err=>{
    	console.log(err);
    })
    
    //form-data请求
    let data = {
    	//请求参数
    }
    
    let formdata = new FormData();
    for(let key in data){
    	formdata.append(key,data[key]);
    }
    
    this.$axios.post('/goods.json',formdata).then(res=>{
    	console.log(res.data);
    },err=>{
    	console.log(err);
    })
    

    2.3、put和patch请求

    示例代码

    //put请求
    this.$axios.put('/url',{
    				id:1
    			}).then(res=>{
    				console.log(res.data);
    			})
    
    //patch请求
    this.$axios.patch('/url',{
    				id:1
    			}).then(res=>{
    				console.log(res.data);
    			})
    

    2.4、delete请求

    示例代码

    //参数以明文形式提交
    this.$axios.delete('/url',{
    				params: {
    					id:1
    				}
    			}).then(res=>{
    				console.log(res.data);
    			})
    
    //参数以封装对象的形式提交
    this.$axios.delete('/url',{
    				data: {
    					id:1
    				}
    			}).then(res=>{
    				console.log(res.data);
    			})
    
    //方法二
    axios({
        method: 'delete',
        url: '/url',
        params: { id:1 }, //以明文方式提交参数
        data: { id:1 } //以封装对象方式提交参数
    }).then(res=>{
    	console.log(res.data);
    })
    

    3、并发请求

    并发请求:同时进行多个请求,并统一处理返回值

    示例代码

    this.$axios.all([
    	this.$axios.get('/goods.json'),
    	this.$axios.get('/classify.json')
    ]).then(
    	this.$axios.spread((goodsRes,classifyRes)=>{
    		console.log(goodsRes.data);
    		console.log(classifyRes.data);
    	})
    )
    

    4、axios实例

    4.1、创建axios实例

    示例代码

    let instance = this.$axios.create({				baseURL: 'http://localhost:9090',				timeout: 2000			})			instance.get('/goods.json').then(res=>{	console.log(res.data);})
    

    可以同时创建多个axios实例。

    axios实例常用配置:

    • baseURL 请求的域名,基本地址,类型:String
    • timeout 请求超时时长,单位ms,类型:Number
    • url 请求路径,类型:String
    • method 请求方法,类型:String
    • headers 设置请求头,类型:Object
    • params 请求参数,将参数拼接在URL上,类型:Object
    • data 请求参数,将参数放到请求体中,类型:Object

    4.2、axios全局配置

    示例代码

    //配置全局的超时时长this.$axios.defaults.timeout = 2000;//配置全局的基本URLthis.$axios.defaults.baseURL = 'http://localhost:8080';
    

    4.3、axios实例配置

    示例代码

    let instance = this.$axios.create();instance.defaults.timeout = 3000;
    

    4.4、axios请求配置

    示例代码

    this.$axios.get('/goods.json',{				timeout: 3000			}).then()
    

    以上配置的优先级为:请求配置 > 实例配置 > 全局配置

    5、拦截器

    拦截器:在请求或响应被处理前拦截它们

    5.1、请求拦截器

    示例代码

    this.$axios.interceptors.request.use(config=>{				// 发生请求前的处理				return config			},err=>{				// 请求错误处理				return Promise.reject(err);			})//或者用axios实例创建拦截器let instance = this.$axios.create();instance.interceptors.request.use(config=>{    return config})
    

    5.2、响应拦截器

    示例代码

    this.$axios.interceptors.response.use(res=>{				//请求成功对响应数据做处理				return res //该返回对象会传到请求方法的响应对象中			},err=>{				// 响应错误处理				return Promise.reject(err);			})
    

    5.3、取消拦截

    示例代码

    let instance = this.$axios.interceptors.request.use(config=>{				config.headers = {					token: ''				}				return config			})			
    //取消请求拦截:this.$axios.interceptors.request.eject(instance);
    //取消响应拦截:this.$axios.interceptors.response.eject(instance);
    

    6、错误处理

    示例代码

    this.$axios.get('/url').then(res={			}).catch(err=>{				//请求拦截器和响应拦截器抛出错误时,返回的err对象会传给当前函数的err对象				console.log(err);			})
    

    7、取消请求

    主要用于取消正在进行的http请求。

    示例代码

    let source = this.$axios.CancelToken.source();
    this.$axios.get('/goods.json',{	
    //只有配置cancelToken: source才可取消请求		
    					cancelToken: source			})
    					.then(res=>{				
    					console.log(res)			})
    					.catch(err=>{				
    //取消请求后会执行该方法				
    //console.log(err)			})
    //取消请求,参数可选,该参数信息会发送到请求的catch中
    source.cancel('取消后的信息');
    
    展开全文
  • Axios使用方法

    千次阅读 2021-03-29 23:03:05
    axios简介 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。...axios的基本使用 如何引入axios 可以通过npm安装来进行使用 $ npm install axio 也可以使用 bower进行安装,然后在页

    axios简介

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    axios的优势:

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http 请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF

    axios的基本使用

    如何引入axios

    可以通过npm安装来进行使用

    $ npm install axio
    

    也可以使用 bower进行安装,然后在页面中进行引入:

    $ bower install axios
    

    还可以使用CDN来进行引入到页面中去

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    如何应用axios

    当我们引入了axios之后,接下来我们就要开始正式的使用axios了,对于axios的使方法比较多:

    1、可以通过向 axios 传递相关配置来创建请求:axios(config)

    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    

    2、在上面的方法的基础上,我们还可以将url作为第一个参数传递给axios方法:axios(url,[config]),对于这样来说,如果我们没有传config,或者config中的method没有传的情况下,axios会默认使用get请求方法来进行请求:

    // 发送 GET 请求(默认的方法)
    axios('/user/12345');
    

    3、针对于get类的请求(get,delete,head,options)我们还可以使用axios[method](url, [config]),这样的形式来进行请求,这样的形似其实和我们所熟知的jquery中的ajax的很类似,但是还是有区别的,对于jquery的来说,我们的针对ajax的请求的传参都是使用data这样的字段来进行传递的,但是对于ajax来说,针对于get类的请求这样的请求,传递的数据,要么我们放在url上面,要么通过config中的params这个参数来进行配置。针对与post类的请求(post,put,patch),这样的请求来说,我们上面的我们可以通过config中的data来进行传递参数,除此之外,我们还可以通过过用以下的形式来进行传递参数:axios[method](url, data,[config])。下面是几个例子:

    get请求:

    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 可选地,上面的请求可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    post 请求

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

    具体的使用方法我们可以如下:
    为方便起见,为所有支持的请求方法提供了别名

    • axios.request(config)
    • axios.get(url[, config])
    • axios.delete(url[, config])
    • axios.head(url[, config])
    • axios.post(url[, data[, config]])
    • axios.put(url[, data[, config]])
    • axios.patch(url[, data[, config]])

    4、当然,我们也重新创建一个新的axios实例来进行使用axios,然后通过实例来使用,其使用的方法,和以上三种使用方法类似。

    var instance = axios.create({
      baseURL: 'https://some-domain.com/api/',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'}
    });
    
    instance.get('helloword.api')
    

    如何使用axios来进行拦截请求和响应

    在谈拦截请求和响应的前,我们先介绍一下拦截器这个概念:
    (如果你熟悉中间件,那么就很好理解了,因为它起到的就是基于promise的中间件的作用)拦截器分为请求拦截器和响应拦截器,顾名思义:请求拦截器(interceptors.request)是指可以拦截住每次或指定http请求,并可修改配置项响应拦截器(interceptors.response)可以在每次http请求后拦截住每次或指定http请求,并可修改返回结果项。
    针对于axios的拦截器,主要分为请求拦截器和响应拦截器。请求拦截器是指可以拦截住每次请求或者是指定的http请求,并且可以修改其配置项。响应拦截器是指在http请求后,可以拦截住每次的响应或者是指定http的响应,并且可以修改其结果。
    具体的使用过程:

    / 添加请求拦截器
    const myRequestInterceptor = axios.interceptors.request.use(config => {
        // 在发送http请求之前做些什么
        return config; // 有且必须有一个config对象被返回
    }, error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(response => {
      // 对响应数据做点什么
      return response; // 有且必须有一个response对象被返回
    }, error => {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    
    // 移除某次拦截器
    axios.interceptors.request.eject(myRequestInterceptor);
    

    请求拦截器和响应拦截器的的使用场景。
    请求拦截器
    1、在我们发送的请求中,我们每次都需要向后端传递的内容,比如说,用户登陆认证的token等相关的内容
    2、如果我们需要对请求数据进行加密的情况下我们可以在请求拦截器中添加
    3、请求链接的处理
    4、统一添加版本号等相关的内容
    响应拦截器
    1、我们对相应结果需要进行统一处理的
    2、我们对相应中的错误进行统一处理,
    3、我们对相应的数据进行统一处理
    等等

    如何使用axios来进行取消请求

    当我们发送一个请求,但是在发送过程中希望取消请求,在传统的ajax中使用的,提供有abort()方法来取消ajax请求,但是在axios中,页提供了有关取消请求的方法,具体的使用方法如下:

    import axios from 'axios'
    
    // 第一种取消方法
    axios.get(url, {
      cancelToken: new axios.CancelToken(cancel => {
        if (/* 取消条件 */) {
          cancel('取消日志');
        }
      })
    });
    
    // 第二种取消方法
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    axios.get(url, {
      cancelToken: source.token
    });
    source.cancel('取消日志');
    

    如何配置axios

    在以上的使用方法中我们看到了在axios请求的时,我们可以添加配置项,但是可以配置的内容有哪些呢:

    {
      // `url` 是用于请求的服务器 URL
      url: '/user',
    
      // `method` 是创建请求时使用的方法
      method: 'get', // 默认是 get
    
      // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
      // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest` 允许在向服务器发送前,修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
      transformRequest: [function (data) {
        // 对 data 进行任意转换处理
    
        return data;
      }],
    
      // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
      transformResponse: [function (data) {
        // 对 data 进行任意转换处理
    
        return data;
      }],
    
      // `headers` 是即将被发送的自定义请求头
      headers: {'X-Requested-With': 'XMLHttpRequest'},
    
      // `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` 表示跨域请求时是否需要使用凭证
      // 打一个比方如果在跨域请求的时候,如果我们需要向后台发送cookie的情况下,这个时候我们需要将这个字段设置成true
      withCredentials: false, // 默认的
    
      // `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', // 默认的
    
      // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
      xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
    
      // `onUploadProgress` 允许为上传处理进度事件
      onUploadProgress: function (progressEvent) {
        // 对原生进度事件的处理
      },
    
      // `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; // 默认的
      },
    
      // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
      // 如果设置为0,将不会 follow 任何重定向
      maxRedirects: 5, // 默认的
    
      // `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) {
      })
    }
    

    以上就是axois中常用的配置项的内容。其实对于axios还有一个通用的默认配置,就比如说,我们请求超时的时间,如我们不会在每次请求的时候都去设置这个超时时间,那么我们又没方法能够进行统一设置这个超时时间的呢,其实我们可以通过使用default.config的方法来进行设置axios的通用的请求配置的内容。

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    

    小结

    以上就是我自己总结的有关axios的使用方法,可能有些地方存在问题,这些对于axios的基本使用已经算足够的,如果希望更深入的去了解axios,就需要我们在实际的使用过程中,不断的总结。总结我们遇到的实际的场景,并且场景中的具体的表现和实际解决思路。

    展开全文
  • 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 使用说明 1、安装 cnpm install axios --save-dev 2、引入 main.js 文件引入: import Vue from 'vue'//引入vue import axios from '...
  • axios使用方法(详细说明)

    千次阅读 2021-04-08 09:50:11
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 从浏览器中创建 XMLHttpRequests ...npm install axios 使用 bower安装 bower install axios 使用 cdn引入: <script src="https

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http 请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF

    安装

    使用npm安装

    npm install axios
    

    使用 bower安装

    bower install axios
    

    使用 cdn引入:

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    例子:

    1.结合 vue-axios使用

    **看了vue-axios的源码,它是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了

    首先在主入口文件main.js中引用:**

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios,axios);
    

    之后就可以使用了,在组件文件中的methods里去使用了:

    getNewsList(){
          this.axios.get('api/getNewsList').then((response)=>{
            this.newsList=response.data.data;
          }).catch((response)=>{
            console.log(response);
          })
    }
    

    2. axios 改写为 Vue 的原型属性

    首先在主入口文件main.js中引用,之后挂在vue的原型链上:

    import axios from 'axios'
    Vue.prototype.$ajax= axios
    

    在组件中使用:

    this.$ajax.get('api/getNewsList')
    .then((response)=>{
        this.newsList=response.data.data;
    }).catch((response)=>{
        console.log(response);
    })
    

    局部使用

    直接引入:

    import axios from 'axios'
    

    常用的配置项初始化

    //  常规配置项
    axios.defaults.baseURL = 'https://127.0.0.1:9999'; //  请求服务器具体的地址
    axios.defaults.withCredentials  =true; //  在跨域中允许携带凭证
    axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';//  声明传给服务器的数据,通过请求传给服务器的数据application/x-www-form-urlencoded格式
    axios.defaults.headers.common["token"] = token; //  携带token请求头
    
    //  请求拦截器:当我们通过porps请求向服务器发请求的时候,能拦截到请求主体信息,然后把请求主体传递进来的json格式的对象,变成urlencoded 某某某等于&某某某格式发送给服务器
    axios.defaults.transformRequest = function (data) {
        if (data) return data;
        let result = ``;
        for (let attr in data) {2
            if(!data.hasOwnProperty(attr)) break;
            result += `&${attr}=${data[attr]}`;
        }
        return result.substring(1);
    };
    //  响应服务器:接受服务器返回的结果,把返回的结果,因为它的anshuosi从服务器获得的结果response对象当中包含了很多信息,既有响应头也有相应主体的信息,xx配置信息。
    //  现在只拿到data,如果有错误就抛出错误的Promise,
    axios.interceptor.response.use(function onFultfilled(response) {
        //  成功走这个
        return response.data;
    }, function onRejected(reason) {
        //  失败走这个
        return Promise.reject(reason);
    });
    //  验证什么时候成功失败,用正则检验,自定义成功失败,主要以http状态码
    axios.dafaults.validateStatus = function (status) {
        //  http状态码,2或者3开头的都是成功,默认只有2开头的才能成功
        return /^(2\3)\d{2}$/.test(status);
    }
    

    使用方式示例

    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
    })
    

    5.携带请求头

    axios设置请求头中的Authorization信息:

    GET请求

    this.$axios.get('/url', 
        {
            headers: {
                'Authorization': 'Bearer '+localStorage.getItem('token'),
                'token': '  '
                ...
            },
            params: {
                param1: string,
                param2: string
            },
            ...
        }
    )
    .then(res => fn)
    .catch(err => fn)
    

    POST请求

    this.$axios.post('/url', param,
        {
            headers: {
                'Authorization': 'Bearer '+localStorage.getItem('token'),
                'token': '  '
                ...
            }
            ...
        }
    )
    .then(res => fn)
    .catch(err => fn)
    
    展开全文
  • 主要介绍了axios使用拦截器统一处理所有的http请求的方法,通过一段实例代码给大家介绍了axios拦截器使用,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Axios使用代理IP请求

    千次阅读 2021-01-14 02:32:18
    问题描述使用vue想要实现爬虫,需要通过代理ip来访问到目标网站,根据文档使用axios的proxy配置却无效果。问题出现的环境背景及自己尝试过哪些方法网上搜索全部是关于proxyTable解决跨域的,没有有用信息。直接...
  • await搭配axios使用

    千次阅读 2021-08-21 14:58:08
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Document&.
  • axios 使用 cancel token 取消请求

    千次阅读 2021-09-22 16:00:10
    axios 使用 cancel token 取消请求 业务场景 1. 在项目中切换路由,停止原路由中的正在请求的接口 在我参与的项目中有的页面在进入时会调用多个接口,并且这些接口可能会几秒后才请求完;在用户切换路由时这些接口就...
  • Vue中Axios使用详解

    千次阅读 2020-07-07 17:22:37
    目录 Axios介绍 Axios安装 Axios二次封装 1. Axios介绍 什么是 axios?...从 node.js 创建 http 请求(可以在Node环境中配合Express()使用实现异步的数据交互) 支持 Promise API(Axios是基于Promise
  • 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 {...
  • Axios基于下一个工具包的常见功能。 安装 npm install -S @jswork/next-axios 用法 import NxAxios from '@jswork/next-axios' ; // code goes here: 资源 待办事项 next-axios transformParam:当get / post /和...
  • nuxt的@nuxtjs/axios 使用

    千次阅读 2021-07-14 16:06:29
    npm i @nuxtjs/axios 或者 yarn add @nuxtjs/axios 2、然后在nuxt.config.js配置文件中配置 modules: [ '@nuxtjs/aixos' ] 3、使用: 不用导入 axios,因为在 配置文件中导入了,所以可以在 nuxt 上下文中得到,...
  • vue中this.$axios使用报错 :axios不是一个方法 解决办法: 1.检查是否安装 axios 安装语句:npm install axios -s 2.没有定义axios的全局变量 再main.js中定义全局变量 import axios from 'axios' import VueAxios ...
  • axios 使用post方式传递参数

    千次阅读 2021-01-12 19:26:28
    axios 使用post方式传递参数,后端接受不到 在使用axios时,要注意到配置选项中包含params和data两者,以为他们是相同的,实则不然 因为params是添加到url的请求字符串中的,用于get请求。 而data是添加到请求体...
  • axios 使用get方式下载文件

    千次阅读 2021-01-28 16:49:24
    最近接触vue项目,学习了一种后台传输文件流,前台使用blob方法接收文件流,记录如下。 导出方法: uploadFile(name, type, title){ downloadExcel({name, type}).then(rst => { this.downloadFile(rst,title);
  • async await结合axios使用

    千次阅读 2019-12-23 20:29:35
    async await结合axios使用 async 和 await是es7的语法 async和await必须结合使用,有await必须要使用async, 有async不一定要使用await,await是将异步转为同步 用async修饰的事件,如果有retrun返回,则返回的是...
  • axios 使用方法

    千次阅读 2019-05-06 09:47:28
    1、 利用npm安装npm install axios --save 2、 利用bower安装bower install axios --save 3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 二、例子 1、 发送...
  • Vue中axios使用详解

    千次阅读 2019-05-20 10:24:35
    一:axios定义 axios是什么:axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axiosaxios的作用:axios主要是用于向后台发起...
  • axios使用get方法传在body中传递参数

    万次阅读 2020-12-16 13:57:35
    以我们公司目前的项目来说,有如下预定,数据交换统一使用JSON,原因在于,JSON格式的数据要更加清晰易懂,各个前后端语言都可以支持,更主要的一点是JSON解析后,是支持数据类型的。 举一个实际的例子,订单前置...
  • axios使用问题

    千次阅读 2021-11-19 15:02:14
    关于axios使用
  • vue2.0之axios使用详解(一)

    万次阅读 多人点赞 2017-03-24 14:39:33
    axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据...
  • Axios解决post字符串出现额外字符
  • 最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 请求一直报错,显示request URI too ...
  • vue+axios使用(form/json)传参,后端SpringBoot接受 今天用到了前后端数据传输所以记录一下 前端向后端传输数据形式总共分为两种,Form表单形式和JSON格式 下面举例说明 一、前端axios传参 //传递的数据 data() ...
  • axios使用form-data进行文件上传

    千次阅读 2020-09-01 08:57:43
    axios文件上传 使用form-data进行文件的上传 const FormData = require('form-data'); const form = new FormData(); form.append('upload1', fs.createReadStream(filePath1)); form.append('upload2', fs....
  • axios使用详解

    万次阅读 2022-03-11 19:26:45
    axios的基本使用 axios是什么 ​ 前端最流行的ajax请求库,react/vue官方都推荐使用axios发送ajax请求,是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。文档:https://hithub.com/axios/axios ​ 细节...
  • 今天学习vue仿写饿了么,发现用的是vue-resource,但是...2、axios 支持 Node.js 环境的使用,换句话说在 Vue SSR 中不需要额外处理,vue-resources 当时是只提供了浏览器环境,现在不知道了; 主要还是功能强大...
  • 项目中需要实现二进制流文件下载,采用Blob方式 首先采用axios进行get请求. 代码如下: import axios from 'axios' const instant = axios.create({ withCredentials: true, ...
  • https://www.cnblogs.com/zdz8207/p/vue-axios-form-data-payload-cookie-withCredentials.html 转载于:https://www.cnblogs.com/yishenweilv/p/11268851.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 185,697
精华内容 74,278
关键字:

axios使用

友情链接: Activex.rar