2018-07-13 11:33:55 YU_M_K 阅读数 6499
1:简单介绍及安装

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

         安装:npm install axios
2:地址

       https://www.kancloud.cn/yunye/axios/234845

3: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);
  });
4:执行post请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
5:执行多个并发请求
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) {
    // 两个请求现在都执行完成
  }));


2018-12-25 16:10:00 weixin_34087301 阅读数 0

react native的网络请求推荐使用axios和fetch 两种方式,当前阐述的是axios

1.安装axios

yarn add react-native-axios

2.创建一个js,进行基本的配置

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

baseURL:设置相对应的baseURL来传递URL

timeout:设置超时

withCredentials: 允许cookie

Headers:设置头部信息

method:设置请求方式(常见的有get,post,put,patch,delect)

responseType:设置接受的类型

 

3.拦截器

instance.interceptors.request.use(function (config) {
    const secretKey = getSecretKey()
    if (secretKey) { // 登录之后 store.getters.token
        config.headers['secret-key'] = secretKey
    } else {
        config.headers['action-key'] = getExternalKey()
    }
    return config
}, function (error) {
    return Promise.reject(error);
});
let  alert = false;
// 响应
instance.interceptors.response.use(response => {
    // 根据状态码做相应的事情
    const res = response.data
    if (res.code === 1 && res.showMsg === true) { // 成功
        showToast(res.message,1500);
    }
    if (res.code === -2 && res.showMsg === true) { // 错误
        showToast(res.message,3000);
    }
    if (res.code === 2) { // 警告
        showToast(res.message,3000);
    }
    if (res.code === 1003) { //  权限不足 的情况
        showToast('账号权限不足!',2500);
    }
    if (res.code === 1004 && !alert) { // 获取不到用户信息 或 登录错误
        alert = true
        showToast('登录失败!',2500);
    }
    console.log(res);
    return res
}, (error) => {
    showToast('出错了!请稍后再试!',5000);
    return Promise.reject(error);
})

注:在react native IOS版本下无toast,自己手动安装

yarn add react-native-easy-toast

 

转载于:https://www.cnblogs.com/xx929/p/10174607.html

2019-06-19 23:00:52 qq_41287423 阅读数 4729

React通过axios请求数据

一、全局安装axios:
npm install axios
二、创建axios.js文件(配置了过滤器,请求响应)

import Axios from 'axios'
import {Component} from 'react'
Component.prototype.$axios=Axios //将axios挂载到Component上,以供全局使用

//配置过滤器请求响应(通过查npm官网,axios文档)
Axios.interceptors.response.use(function (response) {
    return response.data;//只获取data数据
  }, function (error) {
    return Promise.reject(error);
  });

并在index.js中引入,import ‘相对路径/axios’

三、若出现跨域:
①最简单直接的方法:
在package.json中,直接配置:“proxy”:“http://47.95.207.1:8080”,
缺点:只能设置一个跨域,多个跨域不可取
②在config —> webpackDevServer.config.js中,找到proxy进行配置:

//设置跨域小暗号:/hehe
 proxy:{
      '/hehe':{
        target:'http://47.95.207.1:8080',
        changeOrigin:true,
        pathRewrite:{'^/hehe':''}
      }
    },

四、在组件中请求数据:

 componentDidMount(){
        //请求api:  http://47.95.207.1:8080/api/getHome  跨域小暗号:/hehe
        this.$axios.get('/hehe/api/getHome')
        .then((res)=>{
            console.log(res)
        })
        .catch((err)=>{
            console.log(err)
        })
    }
2019-08-03 18:15:33 liuyuhua666 阅读数 677

在使用 axios 发送请求的时候,接口地址每次都要写 http://localhost:8080这样类似的url ,太繁琐。那么我们要如何解决呢?
通过 axios 配置,统一处理 baseURL,baseURL: ‘http://localhost:8080/

import axios from 'axios'
const request= axios.create({
  baseURL: 'http://localhost:8080'
})

// 添加请求拦截器
request.interceptors.request.use(config => {
 // 写你想要处理的代码,注意:config一定要返回,否则会报错
 // ...
  return config
})
// 添加响应拦截器
request.interceptors.response.use(res => {
  // 处理响应的代码写在这里,注意:res一定要返回,否则会报错
  return res
})
export { request}

这样在别的地方就能引入这个文件调用request了
本来是这样:

axios.get('http://localhost:8080/aa/bb')

然后就能写成这样:

axios.get('/aa/bb')

看起来是少写了一些代码是不是?,但是项目是分开发版本和生产版本的,现在baseURL写死成了开发版本的,那生产版本的怎么办呢,难道到时候再改过来吗?,显然不合适,所有在项目一开始就要配置好环境变量,让它能够同时适应各个版本

环境变量的配置:https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

首先在根目录也就是与package.json文件同级的目录创建两个以 .env开头的文件,因为以点符号开头,我用的是vscode,所以需要安装一个插件叫 DotENV
在这里插入图片描述
两个文件的名字分别是用于开发版本的 .env.development 和用户生产版本的 .env.production:
在这里插入图片描述
在这里插入图片描述

然后在两个文件中定义以 REACT_APP_ 开头的变量,注意,一定要以 REACT_APP_ 开头,否则环境读取不到:
在这里插入图片描述
创建REACT_APP_URL变量,在两个文件中分别设置它们的url,
在.env.development文件中设置开发时的url,比如:

REACT_APP_URL=http://localhost:8080

在.env.production文件中设置生产时的url,比如:

REACT_APP_URL=http://api.xxx.com

然后在src中创建utils文件夹,在utils中创建url.js文件专门用于导出BASE_URL,
在这里插入图片描述
在url.js中将 BASE_URL 导出:
在这里插入图片描述
注意:配置的变量对应的值需要通过 process.env 才可以拿得到
在这里插入图片描述
现在,不管是生产环境还是开发环境都可以通过 BASE_URL 拿到对应的url,然后将它与axios结合起来:
在url.js的同级目录创建api.js文件
在这里插入图片描述
自此,不管开发还是 生产环境都可以导入api.js文件拿到已经设置了 baseURL 的axios进行ajax请求发送了

2019-01-29 14:36:00 weixin_30606669 阅读数 0
1:package.json 添加
       "proxy": "代理地址"
2  封装axios
    创建server.js  添加
import axios from "axios";
import qs from "qs";
import axios from "axios";
import qs from "qs";

//终止axios的fun
let axiosToken = null;
//请求超时时间
//axios.defaults.timeout = 10000;
// axios拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
err => {
return Promise.reject(err);
}
);
axios.interceptors.response.use(
response => {
//请求完成token置空
axiosToken = null;
return response;
},
error => {
//请求完成token置空
axiosToken = null;
//提示信息
if (axios.isCancel(error)) alert(error.message, "center");
else alert("请稍后再试...", "center");
return Promise.reject(error.response.data); // 返回接口返回的错误信息
}
);

class HttpRequest {
get(httpUrl, paramsData, successFun, errorFun) {
axios
.get(httpUrl, paramsData)
.then(function(res) {
successFun(res);
})
.catch(function(err) {
console.log("请求失败! " + err);
});
}
// post请求
post(httpUrl, paramsData, successFun, errorFun) {
let paramsDatas = paramsData;
//转为json
paramsDatas = qs.stringify(paramsDatas);
axios
.post(httpUrl, paramsDatas, {
//终止请求
cancelToken: new axios.CancelToken(function executor(c) {
axiosToken = c;
})
})
.then(res => {
successFun(res);
})
.catch(err => {
console.log(err);
});
}
//终止请求
doCancelToken(msg = "取消") {
if (axiosToken) axiosToken(msg);
}
}
export default new HttpRequest();

 
3 引入使用 就可以了 
      

  

转载于:https://www.cnblogs.com/lgjc/p/10333978.html

react中的axios

阅读数 1399