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进行赋值。

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

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

拉取分类商品数据：

依然用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',

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

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

  // `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 再使用

如何封装

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

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

设置接口请求前缀 

利用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` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
        baseURL: "http://123.207.32.32:8000",
        timeout: 5000, // 如果请求花费了超过 `timeout` 的时间，请求将被中断
        headers: { "Cache-Control": "no-cache,no-store,max-age=0" }, // 配置禁用缓存，项目上线时需要开启
        /* 
        headers: {
            get: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
      }
      */
    })
    // 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))，必须携带一些特殊的信息
        */
        // config配置对象；headers属性请求头，经常给服务器携带公共参数
        console.log("config:", config);
        // $('#loading').show();
        /**
         * 请求内容类型
         *  responseType: 'blob',
        headers: { 'Content-Type': 'application/json; application/octet-stream' },
         */
        // config.headers.contentType ='application/x-www-form-urlencoded';

        // 获取用户相关的小仓库：获取仓库内部的token，登录成功以后携带给服务器
        let userStore = useUserStore();
        if (userStore.token) {
          config.headers.token = userStore.token;
        }

        // 拦截后需要将config还回去
        return config
    }, err => {
        console.log("err:", err);
        return Promise.reject(error);
    })
    // 2.axios拦截器(响应局部)
    instance.interceptors.response.use((response) => {
        // 对响应数据做点什么
        console.log("response:", response);

        /** 后端会返回 token 过期的状态码
        // ①10010 token过期（30天） ②10011 token无效
        if (response.data.code === 10010 || response.data.code === 10011) {
          Storage.localRemove('token') // 删除已经失效或过期的token（不删除也可以，因为登录后覆盖）
          router.replace({
            path: '/login' // 到登录页重新获取token
          })
        } else if (response.data.token) { // 判断token是否存在，如果存在说明需要更新token
          Storage.localSet('token', response.data.token) // 覆盖原来的token(默认一天刷新一次)
        }
        */

        // $('#loading').hide();
        if (response.status === 200) {
          return Promise.resolve(response.data)
        } else {
          return Promise.reject(response.data)
        }
        // return response;
    }, (error) => {
        // 对响应错误做点什么
       
        // 定义一个变量存储网络错误信息
        let message = "";
        const { status, data, config } = error.response;
        switch (status) {
          case 400:
            // 客户端请求有语法错误，不能被服务器所理解（一般请求参数问题）。
            message = "请求参数有误";
            break;
          case 401:
            // token过期
            message = "token过期";
            break;
          case 403:
            // 拒绝访问
            message = "拒绝访问";
            break;
          case 404:
            // 请求路径错误
            message = "请求路径错误";
            // window.location.href = "/NotFound";
            break;
          case 405:
            message = "请求方法未允许";
            break;
          case 408:
            message = "请求超时";
            break;

          case 500:
            // 服务器出现问题
            message = "服务器出现问题";
            break;
          case 501:
            message = "网络未实现";
            break;
          case 502:
            message = "网络错误";
            break;
          case 503:
            message = "服务不可用";
            break;
          case 504:
            message = "网络超时";
            break;
          case 505:
            message = "http版本不支持该请求";
            break;
          default:
            message = "网络出现问题";
            // message = `连接错误${error.response.status}`;
            break;
        }
        // ElMessage({
          // type: 'error',
          // message,
        // })
        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取消请求CancelToken的原理解析及用法示例_axios canceltoken-CSDN博客

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

大佬笔记

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