vue的ajax（Axios从远程/后台读取数据）

muzidigbig

已于 2024-03-13 13:34:28 修改

阅读量3.5w

点赞数 11

分类专栏： vuejs 前端面试题文章标签： axios vue post axios拦截器合并多个请求

于 2018-07-18 11:29:04 首次发布

本文链接：https://blog.csdn.net/muzidigbig/article/details/81095070

版权

vuejs 同时被 2 个专栏收录

77 篇文章 38 订阅

订阅专栏

前端面试题

72 篇文章 12 订阅

订阅专栏

Axios从远程读取数据

学习Axios的知识，并把数据从远端读取到页面上。后端数据，只要调用相应的页面就可以调取，在实际开发中，这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端，数据大家只要会调用即可。

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，API。

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

axios中文文档说明

安装Axios

我们直接使用npm install来进行安装。

npm install axios --save

由于axios是需要打包到生产环境中的，所以我们使用–save来进行安装。

引入Axios（在哪个模块中使用就在哪个模块中引入/全局中引用）

我们在.vue页面引入Axios，由于使用了npm来进行安装，所以这里不需要填写路径。

// 全局注册 axios
import axios from 'axios'
// 全局变量
Vue.prototype.$axios = axios // 使用 this.$axios.get()

// 在某个组件中使用，组件中导入axios

服务端拉取数据

（在实际项目中这个后台接口地址是后端程序员提供给你的）

可使用万能地址发送做测试。客户端使用即在原来ajax代码替换成axios。

可以先把后台给的地址放到地址栏访问一下，是可以正常访问的，并且输出了json格式的字符串，这就是我们需要的远端数据了。这里我们使用Axios的get 方式来获得数据。

axios.get(url,paramsObj).then().catch()

created(){
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
       //then获取成功；response成功后的返回值（对象）
      .then(response=>{
         console.log(response);
         this.oftenGoods=response.data;
      })
       //获取失败
      .catch(error=>{
        console.log(error);
        alert('网络错误，不能访问');
      })
},

把axios的方法写到了created钩子函数中，我们使用了get 方法进行拉取数据，如果拉取成功用远端数据对oftenGoods进行赋值。

拉取报错，一般有两种情况：

网络不通：网络状况不是很好，这可以在失败后隔5秒再次请求。
报决绝访问：这种多是后端程序员设置了不允许跨域访问，需要你和后端程序员一起调试解决。

拉取分类商品数据：

依然用Get进行拉取，拉取后先用consoe.log(response)查看一下数据结构，让后进行赋值。

在这里贴出拉取和分配不同分类代码：

  //读取分类商品列表
      axios.get('http://jspang.com/DemoApi/typeGoods.php')
      .then(response=>{
         console.log(response);
         //this.oftenGoods=response.data;
         this.type0Goods=response.data[0];
         this.type1Goods=response.data[1];
         this.type2Goods=response.data[2];
         this.type3Goods=response.data[3];
 
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })
html模板输出代码：
<ul class='cookList'>
     <li v-for="goods in type3Goods">
         <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
         <span class="foodName">{{goods.goodsName}}</span>
         <span class="foodPrice">￥{{goods.price}}元</span>
      </li>
</ul>

通用格式：

axios({
  methods: 'post',
  url: 'http://jsonplaceholder.typicode.com/users',
  data: { // 这里展示post请求
      name: 'qiurx'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

所有请求配置参数：

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL(服务器域名之类的)
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `transformRequest` 允许在向服务器发送前，修改请求数据（请求拦截）
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `params` 是即将与GET请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求花费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据（响应拦截）
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `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'})
  },

  // `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) {
    // 对原生进度事件的处理
    
    // progressEvent.loaded：上传进度
    // progressEvent.total：总大小
  },

  // `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全局配置

axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 2000

备注：在一个项目当中，我们经常存在需要多次请求同一个基本URL下的不同路由，如果每次发送请求都书写一遍基本URL无疑会产生大量的代码重复，因此，可以使用全局配置来简化代码。默认配置 | Axios 中文文档 | Axios 中文网

并发请求：将多个请求放在一起全部请求完返回请求数据；若全部请求成功将返回的数据封装到数组中，若有一个请求失败将这个失败的信息返回过来

import axios from 'axios'
axios.all([axios.get('http://123.207.32.32:8000/home/multidata'),axios.get('http://123.207.32.32:8000/home/multidata')]).then(results => {
    console.log(results);
}).catch( err => {
    console.log(err);
})

1. 创建实例：可以使用自定义配置新建一个 axios 实例（更好的自定义实例默认值请求）

const instance = axios.create({
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000, // 如果请求花费了超过 `timeout` 的时间，请求将被中断
    headers: {'X-Custom-Header': 'foobar'}  // 设置请求头
})
instance('home/multidata').then(res => {
    console.log('create:',res);
}).catch( err => {
    console.log(err);
})

axios实例配置

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

axios请求配置

instance.get('/data.json',{
    timeout:5000
})

配置方式的优先级：axios全局配置 < axios实例配置 < axios请求配置

封装axios并使用拦截器

为什么要封装

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。

不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍

这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用

如何封装

封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间.......

设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
状态码: 根据接口返回的不同status ，来执行不同的业务，这块需要和后端约定好
请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便
请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
响应拦截器：这块就是根据后端`返回来的状态码判定执行不同业务

设置接口请求前缀

利用node环境变量来作判断，用来区分开发、测试、生产环境

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

// instance()返回的是Promise（推荐）
function request3(config) {
    // 1.可以使用自定义配置新建一个 axios 实例 
    const instance = axios.create({
        baseURL: "http://123.207.32.32:8000",
        timeout: 5000
    })
    // 2.axios拦截器(请求局部)
    instance.interceptors.request.use(config => {
        // 在发送请求之前做些什么
    /* 
    // 发请求前做的一些处理，数据转化，配置请求头，设置token，设置loading，数据加密等，根据需求去添加
 
    config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded", // 配置请求头
    };
    */
        /** 
         * 2.1 比如config中的一些信息不符合服务器的要求
         * 2.2 比如每次发送网络请求时，都希望在界面中显示一个请求的图标  
         * 2.3 某些网络请求(比如登录(token))，必须携带一些特殊的信息
        */
        console.log("config:", config);
        // 拦截后需要将config还回去
        return config
    }, err => {
        console.log("err:", err);
        return Promise.reject(error);
    })
    // 2.axios拦截器(响应局部)
    instance.interceptors.response.use((response) => {
        // 对响应数据做点什么
        console.log("response:", response);
        return response;
    }, (error) => {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    // 3.发送真正的网络请求
    return instance(config);
}


// 发送请求
request3({
  url: '/home/multidata'
}).then( res => {
  console.log(res);
})

axios上传附件：显示进度

原理

axios的 post 方法，config配置有一个onUploadProgress属性，它接收一个回调函数，参数是上传进度事件（假设命名为：progressEvent）,
progressEvent.loaded：上传进度
progressEvent.total：总大小

data:{
    uploadFileCfg: {
        type: 'file',
        accept: '.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf,.jpg,.png,.jpeg',
        label:
           '支持格式：xls, xlsx, doc, docx, ppt, pptx, pdf, zip, rar，建议大小不超过10M。',
        size:10,
        fileUrl:'编辑文件路径'
     },
}

// 原生 input  
// 绑定的事件：
uploadFile(obj){
    var formData = new FormData();
    formData.append('file', obj.target.files[0]);
    
    const fileAccept = obj.target.files[0].name.split('.').pop();
        if (
          !this.uploadFileCfg.accept
            .split(',')
            .includes('.' + fileAccept.toLowerCase())
        ) {
          this.$message({
            message: `上传格式不正确，请重新上传!`,
            type: 'error'
          });
          return;
        }
        if (obj.target.files[0].size > 1024 * 1024 * this.uploadFileCfg.size) {
          this.$message({
            message: `上传文件大小不能超过 ${this.uploadFileCfg.size}MB, 请重新上传!`,
            type: 'error'
          });
          return;
        }

    axios.post('/your-upload-url', formData, {
	    headers: {
		    'Content-Type': 'multipart/form-data'
    	},
	    onUploadProgress: (progressEvent) => {
		    // 计算上传进度百分比
    		this.uploadPercent = Math.round((progressEvent.loaded * 100) /                 
            progressEvent.total)
    	}
    }).then((res) => {
        console.error('附件上传成功！')

    }).catch(res) {
	    console.error('Error uploading file:', res)
    }
}

参考文献：axios中文文档|axios中文网 | axios

大佬笔记

若有不足请多多指教！希望给您带来帮助！