axios_axios封装 - CSDN
精华内容
参与话题
  • axios的基础使用,你学会了吗

    千次阅读 2020-06-12 10:04:42
    Axios Axios 是一个基于promise的HTTP库,可以用在浏览器和node.js中。 安装 yarn add axios # or npm i axios -S 基本使用 /** * 1、基础使用1 * axios(config) * 2、基础使用2,url不在配置中指定 * axios...
    Axios
    Axios 是一个基于promise的HTTP库,可以用在浏览器和node.js中。
    
    安装
    yarn add axios
    
    # or
    npm i axios -S
    基本使用
    /**
     * 1、基础使用1
     * axios(config)
     * 2、基础使用2,url不在配置中指定
     * axios(url[, config])
     * 3、默认请求方法别名
     * 使用别名方法时, url、method、data 这些属性都不必在配置中指定。
     * 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.all(iterable)
     * axios.spread(callback)
     * 例:
     * let axiosList=[
     *    axios.get('url1', { params: 'xxx' }),
     *    axios.get('url2', { params: 'xxx' })
     * ]
     * axios.all(axiosList).then(axios.spread((res1,res2) => {
     *   console.log(res1,res2) // 分别是两个请求的返回值
     * })
     * 5、创建实例
     * axios.create([config])
     */
    
    /**
     * promise方式
     */
    function get () {
      // GET请求参数名必须是params,URL参数,可参考详细配置
      axios.get('/user', {
          params: {
            ID: '12345'
          }
        })
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
    function post () {
      axios.post('/user', {
          firstName: 'Fred',
          lastName: 'Flintstone'
        })
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
    /**
     * async/await方式
     */
    async function gets () {
      try {
        let data1 = await axios.get('url1', { params: 'xxx' })
        let data2 = await axios.get('url2', { params: 'xxx' })
        console.log(data1, data2)
      } catch (error) {
        console.log(error)
      }
    }
    常用配置
    import axios from 'axios'
    import qs from 'qs'
    
    /**
     * axios config
     */
    // url 前缀
    axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/web/' : '/api/'
    // 跨域请求时携带cookie
    axios.defaults.withCredentials = true
    /**
     * axios 默认 Content-Type: application/json;charset=UTF-8
     * 请求正文为Request Payload,格式是json格式的字符串
     * 用@RequestParam是接收不到参数的,只能用@RequestBody
     * 配置transformRequest,参数使用qs转换
     * 请求头Content-Type会被设置为: application/x-www-form-urlencoded
     * 请求正文为Form Data,格式是key=value&key1=value2
     * 对于 Form Data 请求,后台无需任何注解,即可解析参数
     */
    // 请求数据转json字符串(JSON.stringify()不行)
    axios.defaults.transformRequest = [params => qs.stringify(params)]
    // 请求统一额外参数
    axios.defaults.params = { apiuser: 'debug' }
    // 请求拦截器
    axios.interceptors.request.use(config => {
      // 请求发出前,可以开始加载动画之类的操作
      return config
    }, error => {
      // 请求发出错误处理
      return Promise.reject(error)
    })
    // 响应拦截器
    axios.interceptors.response.use(response => {
      // 接收到响应处理,停止加载动画之类操作
      return response
    }, error => {
      // 响应错误处理,统一异常处理
      console.log(error.stack)
      return Promise.reject(error)
    })
    使用全局默认配置,特殊使用时配置
    使用了上述全局配置之后,请求头Content-Type会被设置为: application/x-www-form-urlencoded 如果上传文件需要将Content-Type设置为multipart/form-data,具体使用如下所示
    
    /**
     * 使用axios上传文件,ajax文件上传
     */
    // input(type="file" οnchange="fileChange" multiple="multiple")
    // 设置multiple可以选择多个文件
    function fileChange (e) {
      // 获取文件对象数组
      let files = e.target.files
      // 创建一个FormData,存储需要提交的表单数据,如果通过ajax方式上传文件,必须使用FormData
      let formData = new FormData()
      // 普通表单数据
      formData.append('num', 123)
      formData.append('name', 'aa')
      // 文件数据
      formData.append('file', files[0])
      // 多个文件数据需要遍历放入
      for (let f of files) {
        formData.append('files', f)
      }
      // 上传data必须转为formData
      axios.post('/upload', formData, {
        // 覆盖默认设置中的transformRequest设置
        transformRequest: [(params, headers) => {
          // 请求头Content-Type 为multipart/form-data
          headers = {
            'Content-Type': 'multipart/form-data'
          }
          // 取消qs参数转换
          return params
        }],
        // 上传进度
        onUploadProgress ({ loaded, total }) {
          let p = (loaded / total * 100).toFixed(0) + '%'
          console.log(p)
        }
      }).then(res => console.log(res))
    }
    详细配置
    {
      // `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` 表示跨域请求时是否需要使用凭证
      withCredentials: false, // 默认的
    
      // `adapter` 允许自定义处理请求,以使测试更轻松
      // 返回一个 promise 并应用一个有效的响应
      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) {
      })
    }
    
    展开全文
  • axios基本用法

    万次阅读 多人点赞 2018-06-08 16:28:41
    一.axios1.什么是axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有以下特征: a.从浏览器中创建 XMLHttpRequest b.从 node.js 发出 http 请求 c.支持 ...

    一.axios

    1.什么是axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

    它本身具有以下特征:

         a.从浏览器中创建 XMLHttpRequest
         b.从 node.js 发出 http 请求
         c.支持 Promise API
         e.拦截请求和响应
         f.转换请求和响应数据
        g.取消请求
        h.自动转换JSON数据

        i.客户端支持防止 CSRF/XSRF

    2.安装

     nodeJs + webpack+vue+ element ui 环境安装

    二.axios  API

    (1).向 axios 传递相关配置来创建请求

    1.axios(config)
    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    
    2.axios(url[, config])
    // 发送 GET 请求(默认的方法)
    axios('/user/12345');

    (2).axios提供了一下几种请求方式

    1.axios.get(url[, config])  执行 GET 请求
    	eg:
    
    	// 向具有指定ID的用户发出请求
    	axios.get('/user?ID=12345')
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    	  
    	// 也可以通过 params 对象传递参数
    	axios.get('/user', {
    		params: {
    		  ID: 12345
    		}
    	  })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    
    2.axios.post(url[, data[, config]]) 执行 POST 请求
    	eg:
    	axios.post('/user', {
    		firstName: 'Fred',
    		lastName: 'Flintstone'
    	  })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    3.axios.request(config)
    
    4.axios.head(url[, config])
    
    5.axios.delete(url[, config])
    
    6.axios.put(url[, data[, config]])
    
    7.axios.patch(url[, data[, config]])
    
    8.axios.all(iterable)执行多个并发请求
    
        eg:
    		function getUserAccount() {
    		  return axios.get('/user/12345');
    		}
    
    		function getUserPermissions() {
    		  return axios.get('/user/12345/permissions');
    		}
    
    		axios.all([getUserAccount(), getUserPermissions()])
    		  .then(axios.spread(function (acct, perms) {
    			// 两个请求现在都执行完成
    		  }));
    9.axios.spread(callback)
    
    
    注意:处理并发请求的助手函数axios.all(iterable)      axios.spread(callback)
    (3).请求配置

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

    //config
    
    {
      // `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` 表示跨域请求时是否需要使用凭证
      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) {
      })
    }
    (4).响应结构

    某个请求的响应包含以下信息

    {
      // `data` 由服务器提供的响应
      data: {},
    
      // `status` 来自服务器响应的 HTTP 状态码
      status: 200,
    
      // `statusText` 来自服务器响应的 HTTP 状态信息
      statusText: 'OK',
    
      // `headers` 服务器响应的头
      headers: {},
    
      // `config` 是为请求提供的配置信息
      config: {}
    }
    使用 then 时,你将接收下面这样的响应:
    
    axios.get('/user/12345')
      .then(function(response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
      });
    (5).配置的默认值/defaults

    你可以指定将被用在各个请求的配置默认值

    1.全局的 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';
    
    2.自定义实例默认值
    // 创建实例时设置配置的默认值
    var instance = axios.create({
      baseURL: 'https://api.example.com'
    });
    
    // 在实例已创建后修改默认值
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    
    3.配置的优先顺序
    配置会以一个优先顺序进行合并。这个顺序是:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者。
    这里是一个例子:
    
    // 使用由库提供的配置的默认值来创建实例
    // 此时超时配置的默认值是 `0`
    var instance = axios.create();
    
    // 覆写库的超时默认值
    // 现在,在超时前,所有请求都会等待 2.5 秒
    instance.defaults.timeout = 2500;
    
    // 为已知需要花费很长时间的请求覆写超时设置
    instance.get('/longRequest', {
      timeout: 5000
    });
    (6).拦截器

    在请求或响应被 then 或 catch 处理前拦截它们。

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
      }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
      }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
      });
    1.如果你想在稍后移除拦截器,可以这样:
    var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);
    2.可以为自定义 axios 实例添加拦截器
    var instance = axios.create();
    instance.interceptors.request.use(function () {/*...*/});

    (7).错误处理

    axios.get('/user/12345')
      .catch(function (error) {
        if (error.response) {
          // 请求已发出,但服务器响应的状态码不在 2xx 范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      });
    可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
    axios.get('/user/12345', {
      validateStatus: function (status) {
        return status < 500; // 状态码在大于或等于500时才会 reject
      }
    })

    请查看官网

    三.注意细节

    1. 引用 axios 时

    Vue.prototype.axios = axios  Vue.prototype.$axios = axios    Vue.prototype.$http = axios  其实是都一个东西,只是vue的原型链上加个变量(且变量不同),值是axios对象 。

    只是 一个是jquery封装过的异步调用方法    一个是vue推荐的第三方异步封装方法  他们都是调用的axios对象

    只是调用的时候 axios.post({..})   this.$axios.post({...})     this.$http.post({....})

    四.案例

    1.本地data.json(f放在src同级)

    {
    	"seller": {
    		"name": "粥品香坊(回龙观)",
    		"description": "蜂鸟专送",
    		"deliveryTime": 38,
    		"score": 4.2,
    		"serviceScore": 4.1,
    		"foodScore": 4.3,
    		"rankRate": 69.2,
    		"minPrice": 20,
    		"deliveryPrice": 4,
    		"ratingCount": 24,
    		"sellCount": 90,
    		"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
    		"supports": [{
    			"type": 0,
    			"description": "在线支付满28减5"
    		}, {
    			"type": 1,
    			"description": "VC无限橙果汁全场8折"
    		}, {
    			"type": 2,
    			"description": "单人精彩套餐"
    		}, {
    			"type": 3,
    			"description": "该商家支持发票,请下单写好发票抬头"
    		}, {
    			"type": 4,
    			"description": "已加入“外卖保”计划,食品安全保障"
    		}],
    		"avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
    		"pics": ["http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"],
    		"infos": ["该商家支持发票,请下单写好发票抬头", "品类:其他菜系,包子粥店", "北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340", "营业时间:10:00-20:30"]
    	}
    }

    2.修改webpack-dev-conf.js

    最新的vue没有dev-server.js文件,如何进行后台数据模拟?

    //第一步
    const express = require('express')
    const app = express()//请求server
    var appData = require('../data.json')//加载本地数据文件
    var seller = appData.seller //获取对应的本地数据
    var goods = appData.goods
    var ratings = appData.ratings
    var apiRoutes = express.Router()
    app.use('/api', apiRoutes)//通过路由请求数据
    
    //第二步
    before(app) {  
    	app.get('/api/seller', (req, res) => {  
    		res.json({  
    			// 这里是你的json内容  
    			errno: 0,  
    			data: seller  
    		})  
    	}),
    	app.post('/api/seller', (req, res) => {  
    		res.json({  
    			// 这里是你的json内容  
    			errno: 0,  
    			data: seller  
    		})  
    	})
    }

    3.axios.vue

    <template>
    	<div>
    		<h1>axios基础介绍</h1>
    		<button @click="get">get请求</button>
    		<button @click="post">post请求</button>
    		<button @click="http">aixos</button>
    		<p>{{msg}}</p>
    	</div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
    	data () {
    		return {
    			msg:'',
    		}
    	},
    	created(){
    		//全局拦截器
    		axios.interceptors.request.use(function (config) {  
    		    // 在发送请求之前做些什么  
    		    console.log('config')
    		    console.log(config)
    		    return config;  
    		}, function (error) {  
    		    // 对请求错误做些什么  
    		    return Promise.reject(error);  
    		}); 
    	},
    	methods: {
    		get(){
    			//1.简单的获取
    			// axios.get("/api/seller").then(res =>{
    			// 	this.msg = res;
    			// })
    			//2.传参数
    			axios.get("/api/seller",{
    				//传参数
    				params:{userid:"999"},
    				//请求头部
    				headers:{
    					token:"jack"
    				}
    			}).then(res =>{
    				this.msg = res;
    			}).catch(function(error){
    				//获取错误
    				console.log("error:"+error)
    			})
    		},
    		post(){
    			axios.post("/api/seller",{
    				//传参数
    					userid:"888"
    				},{
    					headers:{//请求头部
    					token:"tom"
    				}
    			}).then(res =>{
    				this.msg = res;
    			}).catch(function(error){
    				//获取错误
    				console.log("error:"+error)
    			})
    		},
    		http(){
    			//注意:get  传参是params   post传参是data
    			axios({
    				url:"/api/seller",
    				methods:"get",
    				params:{
    					userid:"101"
    				},
    				headers:{
    					token:"http-test"
    				}
    			}).then(res =>{
    				this.msg = res;
    			})
    		}
    
    	}
    }
    </script>
    
    <style  lang="scss">
    </style>



    展开全文
  • Vue之Axios跨域问题解决方案

    万次阅读 多人点赞 2019-07-05 09:29:07
    背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据 axios中文网址:https://www.kancloud.cn/yunye/axios/234845 // axios 中的GET请求 axios.get('/user', { ...

    背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据

              axios中文网址:https://www.kancloud.cn/yunye/axios/234845

    // axios 中的GET请求
    axios.get('/user', {
        params: {
          ID: ‘001’
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // axios 中的POST请求
    axios.post('/user', {
        firstName: '1',
        lastName: '2'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    方案1:既然使用axios直接进行跨域访问不可行,我们就需要配置代理了。代理可以解决的原因:因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,我们可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到我们的代理服务器中,代理服务器再返回数据给我们的客户端,这样我们就可以实现跨域访问数据。

    准备工作:安装所需中间件和插件等,比如axios,http-proxy-middleware等。

    具体案例:这里以访问豆瓣Top250为例,直接访问如下:

    axios.get("http://api.douban.com/v2/movie/top250")
    .then(res=>{
    	console.log(res)
    })
    .catch(err=>{
    	console.log(err)
    })
    

    当执行npm run dev时,控制台报错如下:

    事实证明直接请求确实出现跨域问题了,下面具体演示解决跨域问题的步骤:

    上面所说的必备条件都已安装完成的情况下,执行以下步骤即可解决问题:

    1.配置BaseUrl

    在main.js中,配置数据所在服务器的前缀(即固定部分),代码如下:

    // 项目入口,配置全局vue
    import Vue from 'vue'
    import VueRouter from './router/routes.js'
    import Store from './store/index.js'
    
    import './assets/less/index.less'
    import App from './App.vue'
    
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    
    import axios from 'axios'
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = '/api'  //关键代码
    Vue.config.productionTip = false
    
    
    Vue.use(ElementUI);
    
    new Vue({
    	router:VueRouter,
    	store:Store,
    	template:'<App/>',
    	components: {App}
    }).$mount('#app')
    
    // 默认进入商品模块
    // VueRouter.push({ path: '/home' })
    

    关键代码:axios.defaults.baseURL = '/api',作用是我们每次发送的请求都会带一个/api的前缀。

    2.配置代理

    在config文件夹下的index.js文件中的proxyTable字段中,作如下处理:

      dev: {
        env: require('./dev.env'),
        port: 8090,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api': {
            target:'http://api.douban.com/v2', // 你请求的第三方接口
            changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite:{  // 路径重写,
              '^/api': ''  // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
            }
          }
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
      }

    3.在具体使用axios的地方,修改url如下即可:

     axios.get("/movie/top250").then((res) => {
                      res = res.data
                      if (res.errno === ERR_OK) {
                         this.themeList=res.data;
                      }
                    }).catch((error) => {
                      console.warn(error)
                    })

    4.重新启动项目之后,已经解决了跨域问题,结果如下:

    原理:

    因为我们给url加上了前缀/api,我们访问/movie/top250就当于访问了:localhost:8080/api/movie/top250(其中localhost:8080是默认的IP和端口)。

    在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容,因此实际访问Url是http://api.douban.com/v2/movie/top250。

    至此,纯前端配置代理解决axios跨域得到解决。

    方案2:后端处理跨域问题,加个过滤器即可解决,如下:

    import javax.servlet.*;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * 跨域过滤器
     * @author jitwxs
     * @since 2018/10/16 20:53
     */
    public class CorsFilter implements Filter {
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) res;
            HttpServletRequest request = (HttpServletRequest) req;
    
            // 不使用*,自动适配跨域域名,避免携带Cookie时失效
            String origin = request.getHeader("Origin");
            if(StringUtils.isNotBlank(origin)) {
                response.setHeader("Access-Control-Allow-Origin", origin);
            }
    
            // 自适应所有自定义头
            String headers = request.getHeader("Access-Control-Request-Headers");
            if(StringUtils.isNotBlank(headers)) {
                response.setHeader("Access-Control-Allow-Headers", headers);
                response.setHeader("Access-Control-Expose-Headers", headers);
            }
    
            // 允许跨域的请求方法类型
            response.setHeader("Access-Control-Allow-Methods", "*");
            // 预检命令(OPTIONS)缓存时间,单位:秒
            response.setHeader("Access-Control-Max-Age", "3600");
            // 明确许可客户端发送Cookie,不允许删除字段即可
            response.setHeader("Access-Control-Allow-Credentials", "true");
            
            chain.doFilter(request, response);
        }
    
        @Override
        public void init(FilterConfig filterConfig) {
    
        }
    
        @Override
        public void destroy() {
        }
    
        /*
        注册过滤器:
        @Bean
        public FilterRegistrationBean registerFilter() {
            FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>();
            bean.addUrlPatterns("/*");
            bean.setFilter(new CorsFilter());
            // 过滤顺序,从小到大依次过滤
            bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    
            return bean;
        }
         */
    }
    

    以上axios解决跨域的方案,希望能解决大家遇到的跨域问题,如有问题请添加评论。

    -------------------------------------------------------------------------分割线-------------------------------------------------------------------------------------

    根据评论区内容,区分一下生产环境和开发环境,集体配置如下:

    1.在config文件夹里面创建一个api.config.js的配置文件

    const isPro = Object.is(process.env.NODE_ENV, 'production')
    
    console.log(isPro);
    
    module.exports = {
      baseUrl: isPro ? 'https://www.***/index.php/Official(线上地址)' : 'api/'
    }

    2.在main.js文件里面引入上面文件,这样就可以保证动态的匹配生产和开发环境的定义前缀了,代码如下:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import 'bootstrap/dist/js/bootstrap.min'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import axios from 'axios'
    import apiConfig from '../config/api.config'
    
    Vue.prototype.$axios = axios;
    Vue.config.productionTip = false;
    axios.defaults.baseURL = apiConfig.baseUrl;// 配置接口地址
    axios.defaults.withCredentials = false;

    以上两步即可解决vue的跨域问题,并且可以可以直接build打包到线上,如有问题,请评论区留言,希望对你有所帮助。

    展开全文
  • axios官方文档——中文版

    万次阅读 2019-04-08 16:53:13
    原文地址:https://github.com/axios/axios/blob/master/README.md ...axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP client。 特征 从浏览器创建 XMLHttpRequests 从node.js...

    原文地址:https://github.com/axios/axios/blob/master/README.md

    http://www.cnblogs.com/libin-1/p/6607945.html

    axios

    npm version build status code coverage install size npm downloads gitter chat code helpers

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP client。

    特征

    • 从浏览器创建 XMLHttpRequests
    • 从node.js 发出 http 请求
    • 支持 Promise API
    • 拦截请求(request) 和响应(response)
    • 转换请求和响应数据
    • 终止请求
    • 自动转换 JSON 数据
    • Client 端支持防范 XSRF

    浏览器兼容性

    Chrome Firefox Safari Opera Edge IE
    Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔

    Browser Matrix

    安装

    用 npm:

    $ npm install axios
    

    用 bower:

    $ bower install axios
    

    用 cdn:

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

    样例

    执行一个GET 请求

    const axios = require('axios');
    
    // 向具有给定ID的用户发出请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        // 响应 success
        console.log(response);
      })
      .catch(function (error) {
        // 响应 error
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    
    // 上面的请求也可以通过下面params传递参数的方式实现
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });  
    
    // 想使用async/await吗? 添加`async`关键字到你的函数/方法前面就行
    async function getUser() {
      try {
        const response = await axios.get('/user?ID=12345');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
    

    注意: async/await 是 ECMAScript 2017 的一部分,不支持Internet Explorer和旧版浏览器,因此请谨慎使用。

    执行一个POST 请求

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

    执行多个并发请求

    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现已完成
      }));
    

    axios API

    请求可以通过将相关配置传递给axios来进行.

    axios(config)
    // 发送一个POST请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    // GET请求远程图片
    axios({
      method:'get',
      url:'http://bit.ly/2mTM3nY',
      responseType:'stream'
    })
      .then(function (response) {
        response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
      });
    
    axios(url[, config])
    // 发送一个GET请求 (GET请求是默认请求方式)
    axios('/user/12345');
    

    请求方法别名

    为了方便起见,已经为所有支持的请求方法起了别名。

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

    当使用别名方法时,不需要在在config中指定 url, method, 和 data 属性。

    并发

    帮助函数处理并发请求

    axios.all(iterable)
    axios.spread(callback)

    创建实例

    你可以使用自定义配置创建一个 axios 的新实例。

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

    实例方法

    下面列出了可用的实例方法,指定的配置将与实例配置合并。

    axios#request(config)
    axios#get(url[, config])
    axios#delete(url[, config])
    axios#head(url[, config])
    axios#options(url[, config])
    axios#post(url[, data[, config]])
    axios#put(url[, data[, config]])
    axios#patch(url[, data[, config]])
    axios#getUri([config])

    请求配置

    以下是用于发请求的可用配置项,只有 url 是必须的,默认的请求方式是GET

    {
      // `url` 是用来请求的服务器URL
      url: '/user',
    
      // `method` 是发请求时的请求方式
      method: 'get', // 默认是get
    
      // `baseURL` 会被加到`url`前面,除非`url`已经写全了。
      // 它可以方便的为axios实例设置`baseURL`,然后传递相关联的URLs给实例对应的方法
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest`允许请求数据在发送到服务器之前对其进行更改
      // 仅适用于'PUT', 'POST', 'PATCH'
      // 数组中的最后一个函数必须返回一个string或者Buffer、ArrayBuffer、FormData或Stream的实例
      // 你可以修改headers对象.
      transformRequest: [function (data, headers) {
        // Do whatever you want to transform the data
    
        return data;
      }],
    
      // `transformResponse` 允许数据在传到then/catch之前对其进行更改
      transformResponse: [function (data) {
        // Do whatever you want to transform the data
    
        return data;
      }],
    
      // `headers` 发送自定义headers
      headers: {'X-Requested-With': 'XMLHttpRequest'},
    
      // `params` URL参数,必须做位一个普通对象或者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
      // - Browser only: FormData, File, Blob
      // - Node only: Stream, Buffer
      data: {
        firstName: 'Fred'
      },
    
      // `timeout` 指定请求超时的时间,单位:毫秒
      // 如果请求的时间超过`timeout`, 请求即被中止
      timeout: 1000, // default is `0` (no timeout)
    
      // `withCredentials` 跨站点访问是否适用证书
      withCredentials: false, // 默认不使用
    
      // `adapter` 允许自定义处理请求,这使得测试更容易。
      // 返回一个promise并提供一个有效的响应 (see lib/adapters/README.md).
      adapter: function (config) {
        /* ... */
      },
    
      // `auth` 使用HTTP认证, 并提供凭据。
      // 设置一个带`Authorization'的header,覆盖任何现有的用`headers`参数设置的`Authorization'自定义headers.
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
      // `responseType` 服务器将响应的数据类型,包括'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
      responseType: 'json', // default
    
      // `responseEncoding` 用于解码响应的编码方式
      // 注: 忽略`responseType`的'stream',或者客户端请求
      responseEncoding: 'utf8', // default
    
      // `xsrfCookieName` 用作 xsrf 令牌的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` 携带xsrf令牌值的http header的名称
      xsrfHeaderName: 'X-XSRF-TOKEN', // default
    
      // `onUploadProgress` 允许处理上传的进度事件
      onUploadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
      },
    
      // `onDownloadProgress` 允许处理下载的进度事件
      onDownloadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
      },
    
      // `maxContentLength` 定义允许的http响应内容的最大bytes
      maxContentLength: 2000,
    
      // `validateStatus` 对于一个给定的HTTP响应状态码,是resolve 还是reject 这个promise。如果`validateStatus`返回`true` (或者 `null`,`undefined`), 这个promise will be resolved; 否则,这个promise will be rejected.
      validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      },
    
      // `maxRedirects` 在node.js中要遵循的重定向的最大数量。
      // 如果设为0,不会有重定向,默认5
      maxRedirects: 5, // default
    
      // `socketPath` 定义一个在node.js里面用的UNIX Socket。
      // e.g. '/var/run/docker.sock' 是发送请求到docker后台.
      // 只能指定`socketPath`和`proxy`中的一个。
      // 如果都被指定,按`socketPath`的生效。
      socketPath: null, // default
    
      // `httpAgent` and `httpsAgent` 在node.js中,分别执行http和https请求时使用的自定义代理。
      // 允许配置类似`keepAlive`这样在默认情况下不启用的选项。
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
    
      // 'proxy' 定义代理服务器的主机名和端口。
      // 你也可以用常规的`http_proxy`和`https_proxy`环境变量来定义你的代理。
      // 如果给你的代理配置使用环境变量,你也可以定义一个不代理的`no_proxy`环境变量,内容是一个以逗号分隔的域名列表。
      // 设成`false`就禁用代理,忽略环境变量。
      // `auth`表示HTTP Basic auth会被用于连接到代理,并提供凭证。
      // 这将设置一个`Proxy-Authorization` header,覆盖先前`headers`参数里面设置的`Proxy-Authorization` 自定义headers。
      proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      },
    
      // `cancelToken` 指定可用于取消请求的取消令牌
      // (详情参阅下面的消除部分)
      cancelToken: new CancelToken(function (cancel) {
      })
    }
    

    响应模式

    请求的响应包含以下信息

    {
      // `data` 提供服务器的响应
      data: {},
    
      // `status` 来自服务器响应的HTTP状态码
      status: 200,
    
      // `statusText` 来自服务器响应的HTTP状态消息
      statusText: 'OK',
    
      // `headers` 来自服务器响应的headers,所有header names都是小写
      headers: {},
    
      // `config` 提供了`axios`请求的配置
      config: {},
    
      // `request` 生成这个响应的请求
      // 这是node.js中最后的客户端请求实例(重定向)和浏览器XMLHttpRequest实例
      request: {}
    }
    

    使用 then时,你将收到如下响应:

    axios.get('/user/12345')
      .then(function (response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
      });
    

    当使用 catch或用 拒绝回调 作为 then的第二个参数时,响应将可以通过 error 对象来解释 处理错误 的部分.

    配置默认值

    你可以给每一个请求指定默认配置。

    全局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';
    

    自定义实例默认值

    // 创建实例时设置默认配置
    const instance = axios.create({
      baseURL: 'https://api.example.com'
    });
    
    // 实例创建后改变默认配置
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    

    配置优先级顺序

    配置将按优先顺序改变,顺序是 lib/defaults.js 库中的默认值,然后是实例的 defaults属性,最后 config 请求的参数。后者的配置优先于前者生效。这里有一个例子:

    // 使用库提供的配置默认值创建实例
    // 此时,timeout值为`0`,这是库的默认值
    const instance = axios.create();
    
    // 重写timeout的库默认值
    // 现在所有请求将在timeout前等待2.5秒
    instance.defaults.timeout = 2500;
    
    // 重写这个请求的timeout,因为知道它需要很长时间
    instance.get('/longRequest', {
      timeout: 5000
    });
    

    拦截器

    你可以拦截请求或者响应在他们被 then or catch 处理之前。

    // 添加请求拦截器
    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);
      });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // Do something with response data
        return response;
      }, function (error) {
        // Do something with response error
        return Promise.reject(error);
      });
    

    当你需要删除拦截器时就能删掉。

    const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);
    

    你可以将拦截器添加到axios的自定义实例。

    const instance = axios.create();
    instance.interceptors.request.use(function () {/*...*/});
    

    处理错误

    axios.get('/user/12345')
      .catch(function (error) {
        if (error.response) {
          // 请求已发出,服务器响应的状态码在2xx以外
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // 请求已发出,但是没有收到响应。
          // `error.request` 是浏览器中的一个XMLHttpRequest实例
          // 和node.js中的一个http.ClientRequest实例
          console.log(error.request);
        } else {
          // 设置触发错误的请求时发生了错误
          console.log('Error', error.message);
        }
        console.log(error.config);
      });
    

    您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。

    axios.get('/user/12345', {
      validateStatus: function (status) {
        return status < 500; // 仅当状态代码大于或等于500时拒绝
      }
    })
    

    消除

    您可以使用 取消令牌取消请求。

    axios 取消令牌 API 基于撤销的 可取消承诺提议.

    您可以使用 CancelToken.source 工厂创建一个取消令牌,如下所示:

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    axios.get('/user/12345', {
      cancelToken: source.token
    }).catch(function (thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // handle error
      }
    });
    
    axios.post('/user/12345', {
      name: 'new name'
    }, {
      cancelToken: source.token
    })
    
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');
    

    您还可以通过将执行器函数传递给 CancelToken 构造函数来创建取消令牌:

    const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.get('/user/12345', {
      cancelToken: new CancelToken(function executor(c) {
        // 一个执行器函数接收一个取消函数作为参数
        cancel = c;
      })
    });
    
    // cancel the request
    cancel();
    

    注意:您可以使用相同数量的取消令牌取消对应的请求。

    使用 application/x-www-form-urlencoded 格式

    默认情况下,axios将JavaScript对象序列化为JSON。发送数据时想用 application/x-www-form-urlencoded格式来代替,你可以在下列选项中选一种。

    浏览器

    在浏览器中,您可以使用 URLSearchParams API ,如下所示:

    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);
    

    请注意,不是所有浏览器都支持 URLSearchParams (详见 caniuse.com),但有一个 polyfill 全都可用(确保填补全局变量).

    或者,您可以使用qs库对数据进行编码:

    const qs = require('qs');
    axios.post('/foo', qs.stringify({ 'bar': 123 }));
    

    或以另一种方式 (ES6),

    import qs from 'qs';
    const data = { 'bar': 123 };
    const options = {
      method: 'POST',
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
      data: qs.stringify(data),
      url,
    };
    axios(options);
    

    Node.js

    在node.js中,可以使用 querystring 模块,如下所示:

    const querystring = require('querystring');
    axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
    

    你也可以使用 qs 库.

    注意

    如果您需要对嵌套对象进行字符串化,那么 qs 库是首选,因为querystring方法已经有了解决方案 (https://github.com/nodejs/node-v0.x-archive/issues/1665).

    Semver

    在axios1.0发布版之前,重大更新将使用新的小版本号发布。例如0.5.10.5.4将具有相同的API,但0.6.0将具有重大更新。

    Promises

    axios 基于本地 ES6 Promise 实现是被支持的. 如果您的环境不支持 ES6 Promises, 您可以使用 polyfill.

    TypeScript

    axios 包含TypeScript 定义.

    import axios from 'axios';
    axios.get('/user?ID=12345');
    

    资源

    Credits

    axios在很大程度上受到 Angular 提供的 [httpservice](https://docs.angularjs.org/api/ng/service/http service](https://docs.angularjs.org/api/ng/service/http) 服务的启发。最终,axios努力提供一个在Angular外使用的独立的$http-like服务。

    License

    MIT

    展开全文
  • axios的原理

    万次阅读 2019-01-09 10:00:19
    vue自2.0开始,vue-resource不再作为官方推荐的ajax方案,转而推荐使用axios。 按照作者的原话来说: “Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起...
  • axios的引入和使用

    万次阅读 2018-07-19 21:25:22
    npm install --save axios进行安装    安装之后在要使用的页面组件中进行引入。  import axios from 'axios'    然后在created的声明周期里取得数据  created(){  axios({  url:url,  method: 'get',  ....
  • axios全攻略

    千次阅读 2017-12-22 11:36:42
    axios全攻略
  • 超详细axios教程

    千次阅读 2020-06-03 15:32:21
    超详细axios教程 axios 简介 浏览器兼容性 引入方式 使用举例 1 执行GET请求 2 执行POST请求 3 执行多个并发请求 axios API 1 axiosconfig 2 axiosurl config 3 请求方法别名 4 并发 5 ...
  • axios是什么

    万次阅读 2019-05-09 11:34:48
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消...
  • Axios

    万次阅读 多人点赞 2018-12-22 08:56:04
    Axios Axios概述 首先,axios是基于promise用于浏览器和node.js的http客户端   特点 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动...
  • axios,Ajax,jQuery ajax,axios和fetch的区别

    万次阅读 2018-03-27 18:39:32
    提纲:Axios的概念安装Axios简单示例Axios的APIAxios的请求配置和响应数据格式Axios的拦截器Ajax,jQuery ajax,axios和fetch的区别内容:Axios的概念 axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node....
  • axios

    千次阅读 2019-08-14 09:13:27
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 当然java也是可以用的 <script src="https://unpkg.com/axios/dist/axios.min.js"><... // axios.get('/user?ID=12...
  • 细谈 axios和ajax区别

    万次阅读 多人点赞 2019-03-13 09:48:43
    刚刚接触axios有好多疑惑。它和ajax有什么关系呢和区别呢?接下来一起看下: 1.区别 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。 简单来说: ajax技术实现了网页的局部数据刷新,...
  • axios设置withCredentials

    万次阅读 2019-08-31 17:44:16
    axios的参数中写入: withCredentials:true main.js 配置: Vue.prototype.$axios = axios; axios.defaults.withCredentials = true;
  • 下载并使用axios

    万次阅读 2019-03-06 17:03:05
    1.在当前项目根目录下打开终端,下载axios npm install axios -s 2.下载成功后,配置文件出现相应依赖 3.在src文件下的main.js文件中导入axios import axios from 'axios' Vue.prototype.$axios= axios 4.在组件...
  • 安装axios cnpm install axios 在main.js中添加axios,此处注意axios插件不同于其他,引用不能使用Vue.use();而是使用Vue.prototype.$axios = axios; import axios from 'axios' Vue.prototype.$axios = axios; ...
  • axios.get方式传参

    万次阅读 2018-11-05 14:22:41
  • 在vue组件中使用axios

    万次阅读 2017-11-09 11:18:07
    vue+webpack使用axios
  • axios不同 与vue-resource不能在import axios from 'axios'后使用Vue.use(axios),axios不是插件,要想全局使用axios应该修改其原型链,代码如下import axios from 'axios' Vue.prototype.$axios=axios这样 axios就...
  • Vue项目中-axios设置默认请求地址和请求头 1.导入axios import axios from 'axios' 2.设置默认请求地址 axios.defaults.baseURL='你的请求地址' 3.为post请求设置默认请求头 axios.defaults.headers['Content-Type...
1 2 3 4 5 ... 20
收藏数 54,149
精华内容 21,659
关键字:

axios